Как максимально эффективно использовать Lovable

Это руководство поможет всем пользователям — новичкам и опытным — быстро освоиться и избежать распространенных ошибок при разработке на Lovable.

1. Заложите основу: используйте файл знаний (Knowledge File)

Почему это важно: Файл знаний — это мозг вашего проекта. Он отправляется с каждым запросом и помогает ИИ понять полный контекст.

Что включить:

• Ваше видение продукта (как техническое задание)
• Пользовательские пути и персонажи
• Ключевые функции и возможности
• Дизайн-системы и руководство по UI
• Поведение по ролям (например, Администратор, Пользователь, Инвестор)

Вы можете автоматически сгенерировать файл знаний через режим чата:

Сгенерируй знания для моего проекта на момент T=0 на основе уже реализованных функций.
Generate knowledge for my project at T=0 based on the features I’ve already implemented.

2. Лучшие практики составления запросов

Четкие, подробные запросы = лучший результат. Думайте об ИИ как о своем партнере-разработчике — он знает только то, что вы ему говорите.

Советы по составлению запросов:

• Будьте конкретными: Указывайте точную страницу (например, /dashboard) и ожидаемое поведение.
• Используйте естественный язык:

Я хочу, чтобы пользователи с ролью Инвестор имели доступ к этому компоненту, но не Администраторы.
I want users with the role Investor to access this component, but not Admins.

• Добавляйте скриншоты: Особенно полезно для описания багов или проблем UX.
• Добавляйте ограничения: Скажите ИИ, что не нужно трогать. Например:

Не редактируй /shared/Layout.tsx.
Do not edit /shared/Layout.tsx.

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

**Шаблон разбивки функций:**
Создать новую страницу
Добавить макет UI
Подключить данные
Добавить логику + граничные случаи
Протестировать по ролям

**Feature Breakdown Template:**
Create the new page
Add UI layout
Connect the data
Add logic + edge cases
Test per role

• Если в вашем приложении есть несколько ролей (например, Администратор, Инвестор, Стартап), всегда определяйте, к какой роли относится запрос. Это помогает избежать багов, вызванных общей логикой/компонентами.

Как Инвестор, я хочу просматривать панель управления компании, но не должен иметь возможность её редактировать. Пожалуйста, изолируй эту функцию только для роли Инвестор.
As an Investor, I want to view the company dashboard, but I shouldn’t be able to edit it. Please isolate this feature to the Investor role only.

3. Используйте режим чата часто и с самого начала

Режим чата = ваш ИИ-помощник. Он помогает отлаживать, проводить мозговой штурм и планировать реализацию — не редактируя ваш код, пока вы не будете готовы.

Когда переключаться на режим чата:

• После 2-3 неудачных попыток "Попробовать исправить"
• При отладке сложной логики или проблемах с базой данных
• При планировании новых функций

Предложи 3 способа реализации X
Suggest 3 ways to implement X

💡Совет по рабочему процессу:

Некоторые пользователи используют режим чата 60-70% времени. Нажимайте "Реализовать план" только когда полностью удовлетворены.

💡Если вы забыли использовать режим чата, этот формат улучшает консистентность вывода и предотвращает случайные правки.

На странице /settings реализуй [функцию]. Ожидаемое поведение — [XYZ]. Пожалуйста, не трогай компонент A, макет B или общую логику без необходимости. Следуй лучшим практикам Tailwind / Supabase / X.
On page /settings, implement [feature]. The expected behavior is [XYZ]. Please don’t touch component A, layout B, or shared logic unless necessary. Follow best practices from Tailwind / Supabase / X.

💡Чтобы избежать нежелательного выполнения кода:

Исследуй, но пока не пиши код.
Investigate but don’t write code yet.

Предложи 3 способа решения без изменений.
Suggest 3 ways to solve this without changing anything.

Это оставляет контроль в ваших руках.

💡Когда ИИ входит в "бесконечный цикл", используйте эту последовательность действий, чтобы избежать бесконечных циклов исправления сломанного кода:

1. Переключитесь на режим чата
2. Вставьте скриншот ошибки
3. Скажите:

Пожалуйста, исследуй это, не ломая другие функции. Если нужно, откати к последней рабочей версии и исправь оттуда.
Please investigate this without breaking other features. If needed, revert to the last working version and fix from there.

4. Избегайте распространенных ошибок с Supabase

Внимание: Supabase сложно откатить "чисто". Если вы откатите версию, схема базы данных может сломаться.

Лучшие практики:

• Подключайте Supabase после того, как убедитесь, что фронтенд стабилен
• Если нужно откатиться, попросите ИИ:

Пожалуйста, проверь SQL-схему на T=0 и убедись, что не произошло критических изменений.
Please validate the SQL schema at T=0 and ensure no breaking changes have occurred.

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

5. Используйте визуальное редактирование для быстрых исправлений UI

Инструмент визуального редактирования бесплатный и быстрый. Используйте его вместо запросов для:

• Изменения текста, цветов, шрифтов, настройки макета
• Редактирования нескольких мелких элементов одновременно
• Безопасных коммитов без трат кредитов (с возможностью отмены)

6. Мудро используйте GitHub + контроль версий

• Каждое редактирование — это коммит. Используйте закрепление (pinning) для отметки стабильных версий.
• После каждого работающего коммита - закрепите его
• После каждого бага: Визуально сравните версии. Вы можете запросить:

Сравни версию T-1 с T-0. Что изменилось? Что могло сломаться?
Compare version at T–1 to T–0. What changed? What might be breaking?

• Возвращайтесь к стабильной версии, если чувствуете, что ИИ сломал слишком много.
• Используйте ветки GitHub (branches) на свой страх и риск. Не удаляйте ветку прежде чем переключитесь обратно на main в Lovable, чтобы избежать проблемы синхронизации проекта.

7. Когда всё остальное не помогает, сделайте Ремикс

Многие пользователи осознают: переделать всё занимает меньше времени со второй попытки.

• Ремикс создает чистую копию вашего проекта на T=0
• Пересоберите проект с лучшими запросами + с более четким пониманием
• Используйте старый проект только как справочник

Случаи использования:

• Вы застряли в бесконечном цикле багов
• Хотите начать заново с сохраненной историей
• Нужно отключить Supabase и попробовать новый путь

💡Ремикс требует сначала отключения Supabase.

8. Оставайтесь терпеливыми, оставайтесь спокойными

Вы не одиноки. ИИ умеет быть волшебным в один момент и раздражающим в следующий. Финальные 5% любой разработки часто самые медленные — но самые важные.

💡Золотое правило:

Не торопитесь с запросами. Перепроверяйте всё. Разбивайте работу на небольшие, тестируемые блоки. Чем точнее ваши входные данные, тем лучше ваши результаты.

9. Используйте документацию и просите помощи

• Документация содержит пошаговые инструкции, шаблоны, SEO-советы, интеграции и многое другое. Вы можете задавать вопросы напрямую ИИ-помощнику в документации.
• Присоединяйтесь к Discord-сообществу для получения поддержки сообщества.
• Когда будете готовы, запустите свой проект на платформе Lovable Launch.

10. Бонусные советы

• Составляйте длинные промпты с помощью голосовых заметок (например, на Mac используйте микрофон для диктовки длинных запросов). Набор текста ускорится — особенно полезно, когда вы расстроены или устали.
• Используйте паттерн запроса "Я расстроен..." чтобы подтолкнуть ИИ к лучшей фокусировке
• После крупного редактирования всегда перепроверяйте несколько ролей и их поведение (особенно с условной логикой)
• Сохраняйте стабильные версии как резервные копии для быстрой отладки

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

Создай компонент специально для [роли X] и не переиспользуй общие компоненты без четкой области действия.
Create a component specifically for [role X] and do not reuse shared components unless clearly scoped.

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body>.

Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.

Всё видимое содержимое веб-страницы будет находиться в элементе <body>. Структура типичного HTML-документа выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Привет, мир!</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это веб-страница.</p>
 </body>
</html>

<div> и <span>

<div> и <span> — это элементы HTML, которые действуют как контейнеры исключительно для целей стилизации. В виде основных контейнеров они не несут какого-либо всеобъемлющего смысла или семантического значения. Абзацы семантически уже потому, что содержимое внутри элемента <p> известно и понятно как абзац. <div> и <span> не содержат какого-либо значения и являются просто контейнерами.

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

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

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

И <div> и <span>, однако, являются чрезвычайно важными при создании сайта, потому что они дают нам возможность применять целевые стили к набору контента.

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

Заголовки

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

Заголовки должны быть использованы в порядке, соответствующему содержанию страницы. Основной заголовок страницы или раздела должен быть размечен с помощью элемента <h1>, а последующие заголовки должны использовать элементы <h2>, <h3>, <h4>, <h5> и <h6>, при необходимости.

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

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

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Демонстрация заголовков

Абзацы

За заголовками часто следуют абзацы. Они определяются с помощью блочного элемента <p>. Абзацы могут следовать один за другим, добавляя информацию на страницу по необходимости. Вот пример того, как настроить абзацы.

<p>Стив Джобс был одним из основателей и долгое время главным исполнительным директором Apple. 
   12 июня 2005 года Стив выступил в Стэнфордском университете.</p>

<p>В своем выступлении Стив призвал выпускников следовать их мечтам и несмотря на неудачи 
   никогда не сдаваться — совет, который он искренне принял близко к сердцу.</p>

Демонстрация абзацев

Как отображаются элементы?

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

display

Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display. Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display, но наиболее распространённые это block, inline, inline-block и none.

Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display. Значение block сделает этот элемент блочным.

p {
  display: block;
}

Значение inline сделает этот элемент строчным.

p {
  display: inline;
}

Самое интересное это значение inline-block. Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.

p {
  display: inline-block;
}

Демонстрация inline-block

Пространство между строчно-блочными элементами

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

font-size: 0;

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

div {
  display: none;
}

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

Что такое блочная модель?

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

Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.

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

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

Работа с блочной моделью

Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display, содержимым элемента или свойствами width и height. padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.

Каждая часть блочной модели соответствует свойству CSS: width, height, padding, border и margin.

Взглянем на эти свойства внутри некоторого кода:

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

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

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Блочная модель включает базовую высоту и ширину плюс padding, border и margin

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

Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Блочная модель, без сомнения, одна из наиболее запутанных частей HTML и CSS. Мы устанавливаем значение свойства widthкак 400 пикселей, но фактическая ширина нашего элемента 492 пикселя. По умолчанию блочная модель коробка аддитивна. Таким образом, для определения фактического размера блока мы должны принять во внимание поля, границы и отступы для всех четырёх сторон блока. Наша ширина включает не только значение свойства width, но и размер левого и правого поля, левую и правую границу, левые и правые отступы.

Пока многие из этих свойств не несут большого смысла и это нормально. Для уточнения давайте поближе посмотрим на все эти свойства width, height, padding, border и margin, которые формируют блочную модель.

width и height

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

width

По умолчанию ширина элемента основана на значении display. У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width:

div {
  width: 400px;
}

height

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

div {
  height: 100px;
}

Размеры строчно-блочных элементов

Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.

margin и padding

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

margin

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

div {
  margin: 20px;
}

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

padding

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

div {
  padding: 20px;
}

Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.

margin и padding для строчных элементов

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

Отступы и поля работают как обычно для блочных и строчно-блочных элементов.

Установка margin и padding

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

Свойства margin и padding существуют в обычном и сокращённом виде. При использовании сокращённого свойства margin, чтобы установить одно значение для всех четырёх сторон элемента мы задаём одно значение:

div {
  margin: 20px;
}

Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для <div> мы задаём отступы 10 пикселей сверху и снизу и 20 пикселей слева и справа:

div {
  margin: 10px 20px;
}

Чтобы установить уникальные значения для всех четырёх сторон элемента, укажите эти значения в следующем порядке: сверху, справа, снизу и слева, двигаясь по часовой стрелке. Здесь мы задаём для <div> отступы 10 пикселей сверху, 20 пикселей справа, 0 пикселей снизу и 15 пикселей слева.

div {
  margin: 10px 20px 0 15px;
}

Использование свойства margin или padding с любым числом значений считается сокращением. В обычной записи мы можем установить значение только для одной стороны используя уникальные свойства. После имени каждого из свойств (margin или padding в данном случае) идёт дефис и сторона блока, к которой должно применяться значение: top, right, bottom или left. Например, свойство padding-left принимает только одно значение и установит левое поле для этого элемента, свойство margin-top принимает только одно значение и установит верхний отступ для этого элемента.

div {
  margin-top: 10px;
  padding-left: 6px;
}

Когда мы хотим определить только одно значение margin или padding, то лучше использовать обычную запись. Это сохраняет наш код наглядным и помогает избежать путаницы по пути вниз. Например, вы действительно хотите установить margin в 0 сверху, справа и слева элемента или же на самом деле хотите установить margin снизу в 10 пикселей? Использование обычной записи для свойств и значений помогает нам это делать осмысленно. С другой стороны, когда имеешь дело с тремя или более значениями, сокращение невероятно полезно.

Размеры блока

До сих пор блочная модель была аддитивной. Если вы установили для width 400 пикселей, затем добавили 20 пикселей padding и border 10 пикселей на каждой стороне, фактическая полная ширина элемента становится 460 пикселей. Помните, мы должны сложить значения свойств width, padding и border вместе, чтобы получить реальную полную ширину элемента.

Блочная модель, однако, может быть изменена, чтобы вычисления происходили иначе. CSS3 ввёл свойство box-sizing, которое позволяет нам точно менять, как блочная модель работает и как вычисляются размеры элемента. Это свойство принимает два основных значения — content-box и border-box, каждое из которых оказывает несколько разное влияние на вычисление размера блока.

content-box

Значение content-box является значением по умолчанию, оставляя блочную модель в качестве аддитивной. Если мы не используем свойство box-sizing, то это будет значением по умолчанию для всех элементов. Размер элемента начинается со свойств width и height, далее к ним добавляются значения свойств padding, border или margin .

div {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

border-box

Наконец, значение border-box изменяет блочную модель так, чтобы любые значения свойств border или padding включались внутри width и height элемента. При использовании значения border-box, если для элемента указаны width 400 пикселей, padding 20 пикселей и border 10 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей.

Если мы добавим margin, эти значения должны учитываться для расчёта полного размера блока. Независимо от того, какое значение свойства box-sizing применяется, любые значения margin не будут добавляться в вычисления полного размера элемента.

div {
  box-sizing: border-box;
}

Различные значения box-sizing позволяют по разному вычислять ширину элемента и блока целиком

Выбор размера блока

Вообще говоря, лучшее значение box-sizing для применения — это border-box. Это значение намного упрощает нам математику. Если мы хотим, чтобы весь элемент был 400 пикселей в ширину, он останется 400 пикселей в ширину, независимо от того, какие значения padding или border мы к нему добавляем.

Кроме того, мы можем легко смешивать значения длины. Скажем, мы хотим, чтобы наш блок занимал 40% в ширину. Добавление padding 20 пикселей и border 10 пикселей для всех сторон элемента не сложно и мы по-прежнему можем гарантировать, что фактическая ширина нашего блока останется 40%, несмотря на использование пикселей в другом месте.

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

Инструменты разработчика

В большинстве браузеров есть то, что известно как Инструменты разработчика. Эти инструменты позволяют нам проверить элемент на странице, увидеть, где этот элемент живёт в HTML-документе и посмотреть, какие свойства и значения CSS к нему применяются. Большинство из этих инструментов также включают в себя схему блочной модели, чтобы показать вычисленный размер элемента.

Чтобы увидеть Инструменты разработчика в Google Chrome, откройте меню, выберите «Дополнительные инструменты», а затем «Инструменты разработчика». После этого откроется панель в нижней части окна браузера, которая предлагает несколько инструментов для проверки нашего кода.

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

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

Поиграйте с инструментами разработчика, будь они в Google Chrome, Mozilla Firefox, Apple Safari или других браузерах; можно многое узнать просматривая наш код. Я вообще оставляю панель инструментов всегда открытыми при написании HTML и CSS. И также часто проверяю код других сайтов, чтобы увидеть, как они сделаны.

Инструменты разработчика Google Chrome, которые помогают нам проверять HTML и CSS на любой странице

Блочная модель является одной из самых запутанных частей при изучении HTML и CSS. Она также является одной из самых мощных частей HTML и CSS и как только мы это освоим, практически всё остальное, вроде позиционирования содержимого, пойдёт довольно легко.

Термины CSS включают селекторы, свойства и значения.

Селекторы

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.

p { ... }

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.

p {
  color: ...;
  font-size: ...;
}

Значения

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

p {
  color: orange;
  font-size: 16px;
}

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

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

Структура синтаксиса CSS включает селектор, свойства и значения

Далее, мы должны внимательнее рассмотреть, как селекторы работают в CSS.

Работа с селекторами

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

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div. Следующий код показывает селектор типа для элементов <div>, а также соответствующий HTML.

CSS

div { ... }

HTML

<div>...</div> 
<div>...</div>

Классы

Классы позволяют выбрать элемент на основе значения атрибута class. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

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

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class, включая элементы <div> и <p>.

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

Идентификаторы

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class, идентификаторы используют значение атрибута id в качестве селектора.

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

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id. Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe.

CSS

#shayhowe { ... }

HTML

<div id="shayhowe">...</div>

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

Подключение CSS

Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.

Другие варианты добавления CSS

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

Внутри элемента <head> применяется элемент <link>, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.

<head>
  <link rel="stylesheet" href="main.css">
</head>

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

Каскад

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

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

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

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

Каскадные свойства

Каскад работает со свойствами внутри отдельных селекторов. Опять же, скажем, к примеру, что мы выбрали все элементы абзаца и установили для них цвет фона orange. Затем прямо ниже свойства background и его значения мы добавляем ещё одно свойство и значение, которое задаёт цвет фона green, как показано здесь.

p {
  background: orange;
  background: green;
}

Поскольку объявление зелёного цвета фона написано после объявления оранжевого цвета фона, как и прежде, наши абзацы будут отображаться на зелёном фоне.

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

Вычисление специфичности

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

В уроке 1 «Создание первой веб-страницы» мы говорили о трёх разных видах селекторов: селектор типа, класс и идентификатор. Каждый из этих селекторов имеет различный вес специфичности.

У селектора типа низкий вес специфичности и значение балла 0-0-1. У селектора класса средний вес специфичности и значение балла 0-1-0. Наконец, у идентификаторов высокая специфичность и значение балла 1-0-0. Как мы видим, баллы специфичности вычисляются с помощью трёх колонок. В первой колонке количество идентификаторов, во второй классов, а третья колонка считает селекторы типа.

Важно отметить, что идентификатор имеет больший вес специфичности чем селектор класса, а класс больший вес, чем селектор типа.

Баллы специфичности

Баллы специфичности намеренно разделены дефисом, так как их значения не вычисляются по десятичной системе. У селекторов класса нет 10 баллов, у идентификаторов нет 100 баллов. Вместо этого эти баллы следует читать как 0-1-0 и 1-0-0 соответственно. Мы внимательно рассмотрим, почему эти значения пишутся через дефис в ближайшее время, когда мы станем комбинировать селекторы.

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

HTML

<p id="food">...</p>

CSS

#food {
  background: green;
}
p {
  background: orange;
}

Здесь у нас есть элемент абзаца со значением атрибута id — food. В нашем CSS этот абзац выбирается двумя различными типами селекторов: один селектор типа, а второй идентификатор. Несмотря на то, что селектор типа указан после идентификатора в каскаде, идентификатор имеет приоритет над селектором типа, потому что он имеет больший вес специфичности, следовательно, абзац появится на зелёном фоне.

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

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

Комбинация селекторов

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

Скажем, к примеру, мы хотим выбрать все элементы абзаца, которые находятся внутри элемента со значением атрибута класса hotdog и установить для них цвет фона как brown. Однако, если один из этих абзацев, случаем, содержит значение атрибута класса mustard, мы хотим установить его цвет фона как yellow. Наши HTML и CSS могут выглядеть следующим образом:

HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

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

Первый комбинированный селектор выше, .hotdog р, включает в себя два селектора: класс и селектор типа. Эти два селектора разделяются пробелом. Ключевым селектором выступает селектор типа, нацеленный на элементы абзаца. Поскольку этот селектор сочетается с классом hotdog, полный комбинированный селектор выбирает только элементы абзаца, которые находятся внутри элемента с классом hotdog.

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

Пробелы в селекторах

В предыдущем комбинированном селекторе, .hotdog p.mustard, есть пробел между классом hotdog и селектором абзаца, но не между селектором абзаца и классом mustard. Использование пробелов и отказ от них — это большая разница в селекторах.

Поскольку нет пробела между селектором абзаца и классом mustard, это значит что будут выбраны только абзацы с классом mustard. Если бы селектор абзаца был удалён, а класс mustard содержал пробелы с двух сторон, то был бы выбран любой элемент с классом mustard, а не только абзацы.

Лучше всего не писать селектор типа перед селектором класса. Как правило, мы хотим выбрать любой элемент с данным классом, а не только один тип элемента. С учётом этого наш новый комбинированный селектор будет лучше писать как .hotdog .mustard.

Читая комбинированный селектор справа налево — он нацелен на абзацы со значением атрибута класса mustard, который располагается внутри элемента с значением атрибута класса hotdog.

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

Специфичность в комбинированных селекторах

Вес специфичности комбинированных селекторов может быть вычислен путём подсчёта каждого отдельного типа селектора в их комбинации.

Взглянем на наш комбинированный селектор выше. Первый селектор, .hotdog р, содержит селектор класса и селектор типа. Зная, что баллы класса это 0-1-0, а баллы селектора типа это 0-0-1, суммарные комбинированные баллы будут 0-1-1, это определяется путём суммирования каждого вида селектора.

Второй селектор, .hotdog p.mustard, содержит два селектора класса и один селектор типа. У комбинированного селектора будут баллы 0-2-1. 0 в первой колонке показывает нулевое число идентификаторов, 2 во второй колонке — два селектора класса, а 1 в последней колонке — один селектор типа.

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

.hotdog p.mustard {
  background: yellow;
}
.hotdog p {
  background: brown;
}

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

Разделение стилей по нескольким классам

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

Элементы в HTML могут содержать более одного атрибута class, при этом их значения разделяются пробелами. За счёт этого мы можем применить некоторые стили ко всем элементам одного вида, а другие стили к конкретным элементам этого же вида.

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

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

HTML

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

CSS

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

Здесь вы можете увидеть два элемента ссылок с несколькими значениями атрибутов класса. Первый класс, btn, используется для задания размера шрифта 16 пикселей каждому из элементов. Затем, первый элемент ссылки использует дополнительный класс btn-danger, чтобы применить красный цвет фона, а второй элемент ссылки использует дополнительный класс btn-success, чтобы применять зелёный цвет фона. Наши стили чистые и модульные.

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

Основные значения свойств CSS

Мы уже применяли небольшую часть значений основных свойств CSS, такие как значения цвета red и green. Вы, возможно, не слишком задумывались об этом, это нормально. Мы теперь потратим немного времени и перейдём к некоторым ранее используемым значениям свойств, а также исследуем часть основных свойств, которые вскоре будем использовать.

В частности, взглянем на свойства, которые относятся к цветам и размерам.

Цвета

Все цветовые значения в CSS определяются как цветовое пространство sRGB (или стандартный красный, зелёный и синий). Цвета в пределах этого пространства образуются путём смешивания вместе красного, зелёного и синего цветовых каналов, отражая способ, каким телевизоры и мониторы генерируют все разные цвета, которые они показывают. При смешивании различных уровней красного, зелёного и синего мы можем создать миллионы цветов и обнаружить почти любой желаемый цвет.

В настоящее время существует четыре основных способа представления цвета sRGB в CSS: ключевые слова, шестнадцатеричная запись, значения RGB и HSL.

Ключевые цвета

Значения ключевого слова — это названия (такие как red, green или blue), которые отображаются данным цветом. Названия ключевых слов и соответствующие им цвета определяется спецификацией CSS. Наиболее распространённые цвета, наряду с несколькими странностями, связаны с ключевым названием.

Полный список этих названий можно найти в спецификации CSS.

Здесь мы применяем фон maroon к любому элементу с классом task и фон yellow к любому элементу с классом count.

.task {
  background: maroon;
}
.count {
  background: yellow;
}

Ключевые цвета просты по своей природе, но их ограниченное количество, поэтому это не самый популярный способ выбора цвета.

Шестнадцатеричные цвета

Шестнадцатеричные значения цвета начинаются с решётки (#), затем идёт три или шесть символов. Используются цифры от 0 до 9 и буквы от А до F, в верхнем или нижнем регистре. Эти значения отображают красный, зелёный и синий цветовые каналы.

В шестисимвольной записи первые два символа представляют красный канал, третий и четвертый символы представляют зелёный канал, а последние две цифры представляют синий канал. В трёхсимвольной записи первый символ представляет красный канал, второй символ представляет зелёный канал, а последний символ представляет синий канал.

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

Рис. 3.01. Шестисимвольное значение можно записать в виде трёх символов, когда каждый красный, зелёный и синий цветовые каналы содержат повторяющийся символ

Пары символов получаются путем преобразования чисел от 0 до 255 в шестнадцатеричный формат. Математика здесь немного сложна и достойна отдельной книги, но полезно знать, что 0 равен чёрному, а F равен белому.

Миллионы шестнадцатеричных цветов

Есть миллионы шестнадцатеричных цветов, свыше 16,7 млн, если быть точным. Во как…

Имеется 16 вариантов каждого символа в шестнадцатеричном цвете, от 0 до 9 и от A до F. Группируя символы парами мы получим 256 вариантов цвета (16×16 или 162). С тремя группами по 256 вариантов в каждой у нас есть в общей сложности более 16,7 млн цветов (256×256×256 или 2563).

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

.task {
  background: #800000;
}
.count {
  background: #ff0;
}

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

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

Рис. 3.02. Палитра цветов в Adobe Photoshop показывает шестнадцатеричное значение цвета

Цвета RGB и RGBa

Значения цвета RGB задаются с помощью функции rgb(). Функция принимает три значения — красный, зелёный и синий, разделенные запятыми, каждое из которых является целым числом от 0 до 255. Значение 0 будет чисто чёрным, значение 255 будет чисто белым.

Как и следовало ожидать, первое значение в функции rgb() представляет красный канал, второе зелёный канал, а третье значение — синий канал.

Если бы мы хотели переделать оттенок оранжевого в качестве значения цвета RGB, то он будет представлен как rgb(255, 102, 0).

Кроме того, используя те же цвета maroon и yellow, что раньше, мы могли бы заменить ключевые слова или шестнадцатеричные значения на значения RGB.

.task {
  background: rgb(128, 0, 0);
}
.count {
  background: rgb(255, 255, 0);
}

Значения цвета RGB могут включать в себя альфа-канал или прозрачность с помощью функции rgba(). Эта функция требует четвёртое значение, которое должно быть числом от 0 до 1, включая десятичные знаки. Значение 0 создаёт полностью прозрачный цвет, в том смысле что он будет невидимым, а значение 1 создает полностью непрозрачный цвет. Любое десятичное значение от 0 до 1 создаст полупрозрачный цвет.

Если мы хотим, чтобы наш оранжевый оттенок стал на 50% прозрачным, то могли бы использовать RGBa значение цвета rgba(255, 102, 0, .5).

Мы также можем изменить прозрачность нашего цвета maroon и yellow. Следующий код устанавливает цвет фона maroon на 25% прозрачным и оставляет цвет фона yellow 100% непрозрачным.

.task {
  background: rgba(128, 0, 0, .25);
}
.count {
  background: rgba(255, 255, 0, 1);
}

Значения цвета RGB становятся всё более популярными, особенно в связи с возможностью создания полупрозрачных цветов с помощью RGBa.

Размеры

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

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

Абсолютные размеры

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

Пиксели

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

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

p {
  font-size: 14px;
}

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

Относительные размеры

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

Проценты

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

.col {
  width: 50%;
}

Здесь мы установили ширину элемента с классом col как 50%. Эти 50% будут рассчитываться по отношению к ширине родительского элемента.

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

Подводя итоги, в этом уроке мы обсудили следующее:

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

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

Краткий план действий:

1. Установка и начальная настройка Wine
2. Установка winetricks и необходимых зависимостей
3. Установка Photoshop

Перед тем, как начать

Подразумевается, что все манипуляции производятся на чистой системе.

Если у вас уже установлен wine, ничего удалять не надо. Убедитесь, что используете не сильно устаревшую версию wine и winetricks, выполните команду из пункта 5 и произведите установку Photoshop.

Установка Wine

Я буду рассматривать установку 64 разрядной версии wine.

1. Проделайте базовую установку wine и winetricks используя терминал или центр приложений.
2. Запустите winecfg (введите эту команду в терминал)
3. Вам будет предложено установить wine-mono, wine-gecko и т.д., соглашаемся и устанавливаем их.
4. После всех манипуляций откроется окно настройки wine. В нём выберите версию Windows 8.1 и нажмите применить.
5. Скопируйте команды написанные ниже и запустите их в терминале.

WINEPREFIX=/домашняяпапка/имяпользователя/.wine wineboot -u WINEARCH=win64

WINEPREFIX=/домашняяпапка/имяпользователя/.wine winetricks fontsmooth=rgb gdiplus vcrun2008 vcrun2010 vcrun2012 vcrun2013 vcrun2015 atmlib msxml3 msxml6 gdiplus corefonts

Настройка wine завершена.

Установка Photoshop

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

Мной было протестировано несколько portable версий Photoshop. Среди который наиболее стабильным и работоспособным оказался Adobe Photoshop CC 2018 v19.1.3.49649 RePack by JFK2005 (x64) Eng_Rus

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

Загрузите сборку, описанную выше и установите. Установка тривиальна и не требует разбора. После установки создастся ярлык программы на рабочем столе. Если вы хотите расположить ярлык в меню программ, откройте ваш файловый менеджер с правами администратора ( например, “sudo nautilus”) и переместите ярлык по пути /usr/share/applications

Этот ярлык можно отредактировать открыв его с помощью текстового редактора (gedit, например). Откройте ярлык и добавьте следующую строчку:

MimeType=image/psd;

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

Добавьте ещё одну строчку:

Categories=Graphics;

Не забудьте сохраниться перед закрытием файла

Теперь вы можете найти установленную программу в меню приложений, в категории Графика. На этом у меня всё. Если возникнут проблемы, пишите в комментариях. В статье использована оригинальная фотография из экрана загрузки Photoshop CC 2018 сделанная Елизаветой Породиной и Janusz Jurek.

xОригинал статьи здесь

ФОРМУЛЫ СОСТОЯНИЙ

Вот состояния и их формулы, приведённые в порядке возрастания:

Состояние Несуществования 

(Формула для работы на новом посту)

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

Человек обычно пребывает в заблуждении, что он теперь является «САМИМ _______ (новая должность)». Он старается начать свою деятельность в состоянии Могущества, так как обычно он очень хорошо осознаёт свой новый статус или даже свой прежний статус. Но на самом деле он единственный, кто это осознаёт. Все остальные, за исключением, возможно, администратора по персоналу, абсолютно ничего не знают о том, что у него новый статус.

Следовательно, он начинает свою деятельность в состоянии Несуществования. И если он не начнёт действовать согласно формуле Несуществования, то будет использовать неправильное состояние и попадёт в разного рода неприятности.

Формула Несуществования

Формула Несуществования такова:

1.   Найдите коммуникационную линию.

2.   Добейтесь, чтобы о вас узнали.

3.   Выясните, что другим требуется или чего они хотят.

4.   Делайте, производите и/или предоставляйте это.

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

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

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

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

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

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

Затем человек может рассчитывать на то, что он окажется в состоянии Чрезвычайного положения. Находясь в этом состоянии, он должен следовать формуле Чрезвычайного положения, применяя её к своей работе, и тогда он пройдёт и через это состояние.

Теперь человек может рассчитывать на то, что он окажется в состоянии Нормальной деятельности, и, если он будет следовать формуле этого состояния, он поднимется до Изобилия. И если он будет следовать формуле этого состояния, то он достигнет состояния Могущества. И если он будет применять формулу состояния Могущества, то он останется в этом состоянии.

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

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

Это применимо и в тех случаях, когда человек терпит неудачу на работе. Он должен вновь начать с Несуществования и двигаться вверх таким же образом — состояние за состоянием.

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

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

Расширенный вариант формулы состояния Несуществования

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

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

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

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

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

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

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

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

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

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

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

Но что же в действительности произошло?

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

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

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

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

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

Старшие руководители — такие как главы отделений или руководители организации — несут ответственность за информирование своих сотрудников. Но перед ними обычно стоят проблемы безопасности, и, кроме того, они хотят выглядеть в лучшем свете. Вместе с тем информация, которой они располагают, затрагивает всё отделение или всю организацию в целом, хотя включает в себя и подробности такого рода: «Миссис Зайкс прибывает в 14:00» или «Представитель телефонной компании говорит, что счёт нужно оплатить сегодня до 12 часов, иначе нас отключат».

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

Следовательно, расширенная формула Несуществования выглядит так:

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

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

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

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

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

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

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

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

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

Состояние Опасности

Состояние Опасности обычно назначается, если:

1.   Состояние Чрезвычайного положения продолжается слишком долго.

2.   Статистика очень круто устремляется вниз.

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

Обход — это пропуск надлежащего терминала (человека или поста) в командной цепи.

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

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

Далее, если вы будете постоянно выполнять работу других, действуя в обход, вся работа, конечно, станет вашей. Это объясняет, почему руководители перегружены. Они действуют в обход подчинённых. Только и всего. Если руководитель постоянно действует в обход, то оказывается перегруженным.

Кроме того, это ведёт к Несуществованию.

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

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

Если вам приходится выполнять работу в обход подчинённых, вы должны объявить данное состояние и следовать формуле.

Если вы объявляете данное состояние, вы должны ещё и выполнять работу.

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

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

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

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

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

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

Формула состояния Опасности

Формула такова:

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

2.   Справьтесь с ситуацией и любой опасностью в ней.

3.   Назначьте области, в которой пришлось справляться с ситуацией, состояние Опасности.

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

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

6.   Предложите твёрдое правило, которое будет в дальнейшем выявлять и/или предотвращать повторение этого состояния.

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

Формула Опасности для личного состояния

Для личного использования эта формула принимает следующий вид:

1.   Обойдите привычки или установившуюся практику.

2.   Справьтесь с ситуацией и любой опасностью в ней.

3.   Назначьте себе состояние Опасности.

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

5.   Реорганизуйте свою жизнь так, чтобы эта опасная ситуация не возникала у вас постоянно.

6.   Сформулируйте и примите твёрдое правило, которое позволит вам впоследствии выявлять подобные ситуации и предотвращать их повторное возникновение.

Пример применения формулы Опасности для личного состояния:

Шаг «обойдите привычки или установившуюся практику» значит прекратить делать всю ту ерунду, что вы делали.

Скажем, один парень брал деньги у своего дяди и говорил, что покупает на них дом, а сам тратил их на одну блондинку. Теперь он в постоянной опасности. Его дядя в любой момент может обнаружить это, а поскольку парень надеется когда-нибудь унаследовать дядино состояние, он близок к панике. Даже если он об этом не думает, это состояние всё же присутствует.

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

Ему нужно также справиться с ситуацией и любой опасностью в ней. Было бы очень опасно написать: «Дорогой дядя Джордж, все деньги, которые ты посылал мне в последние полтора года на покупку дома, я тратил на блондинку по прозвищу Мотылёк». Он должен будет придумать, как уладить это, чтобы в этом не было опасности. И, возможно, ему придётся хорошенько подумать.

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

Следующий шаг — «Назначьте себе состояние Опасности». Этот шаг здесь только потому, что люди забывают это сделать. А затем «введите в действие вашу собственную этику, выяснив, что именно вы делаете неэтично, и используйте самодисциплину, чтобы исправить это и стать честным и порядочным». Так вот, могут быть какие-нибудь другие «дяди Джорджи», и ему всё ещё нужно уладить ситуацию с этой блондинкой по прозвищу Мотылёк. Хотя он и уладил ситуацию с дядей, может быть что-то ещё.

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

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

Формула Опасности для подчинённого

Если состояние Опасности назначается подчинённому, потребуйте, чтобы он (или все, кто работает в данной области) выписал свои оверты и висхолды, а также написал обо всех известных ему неэтичных ситуациях и сдал это всё к установленному сроку — с условием, что в таком случае взыскание за это будет снижено, но если что-то будет выявлено после установленного срока, то взыскание будет удвоено.

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

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

Полностью процедура выписывания овертов и висхолдов описана в курсе «Целостность и честность».

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

Когда производство снова увеличится, следует официально объявить о завершении состояния Опасности, назначить состояние Чрезвычайного положения и следовать формуле этого состояния.

Состояние Чрезвычайного положения

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

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

Таким образом, мы имеем три действия, и только три. Первое — расширение, второе — попытка оставаться на прежнем уровне или неизменным и третье — сокращение или уменьшение.

Поскольку в этой вселенной ничто не может оставаться точно таким же, каким оно было, второе действие (сохранение на прежнем уровне) перейдёт в третье (уменьшение), если этому не помешает или если на это не повлияет какая-то внешняя сила. Поэтому второе и третье действие (сохранение на прежнем уровне и уменьшение) имеют сходный потенциал и оба приведут к уменьшению.

Расширение в итоге остаётся единственным конструктивным действием, которое обычно гарантирует выживание.

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

Если что-то остаётся на прежнем уровне, то обычно это становится меньше. Если что-то становится меньше, то и шансы этого на выживание уменьшаются.

Следовательно, остался только один шанс и как для организации, так и для индивидуума этот шанс — расширение.

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

Состояние Чрезвычайного положения используется в следующих случаях:

1.   Когда статистика организации, или её структурного подразделения, или отдела, или человека понижается.

2.   Когда статистика организации, или её структурного подразделения, или человека не изменяется.

Формула состояния Чрезвычайного положения такова:

1.   Продвигайте. Это относится к организации. Человеку лучше сказать «производи». Это первое действие, независимо от того, каковы другие действия, независимо ни от чего; это первое, на что необходимо обратить внимание.

Что же в точности значит слово «продвижение»? Что ж, посмотрите в словаре. Это значит «делать что-либо известным; выпускать что-то». Это значит «заявлять о себе; выпускать свою продукцию».

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

3.   Экономьте.

4.   Приготовьтесь предоставлять.

5.   Укрепите дисциплину. Формула состояния Чрезвычайного положения содержит такую маленькую строчку: «Вы должны укрепить дисциплину» или «Вы должны укрепить этику».

Для человека это будет просто означать: не ходите в бар каждую пятницу вечером. Укрепите дисциплину. Останьтесь дома и допоздна корпите над своей работой. Займитесь работой и так далее. Работайте чуть более упорядоченно, работайте немного интенсивнее, не допускайте так много глупых промахов, не делайте так много ошибок. Всё это будет укреплением дисциплины.

Рассмотрим, как это применимо к организации. Предположим, что какая-то часть организации не выходит из Чрезвычайного положения, когда ей назначено это состояние. Независимо от того, что привело к Чрезвычайному положению, предположим, что, хотя какому-то подразделению было назначено Чрезвычайное положение, оно просто не выходит из Чрезвычайного положения. Сотрудники получили указание «выполнять формулу», им велели «действовать попроворнее» и «привести дела в порядок», но, несмотря на это, выясняется, что они всё ещё валяют дурака и статистика продолжает идти вниз. Что же вам делать? Осталось только одно, и это дисциплинарные меры, потому что жизнь сама применит их к человеку.

Так что правило игры здесь такое: если Чрезвычайное положение было проигнорировано и шаги формулы не были успешно выполнены («не были успешно выполнены» отличается от «не были выполнены»), тогда вам объявляют, что состояние остаётся в силе. И если состояние не меняется дольше установленного периода времени, то надо переходить к этическим мерам. Ведь как иначе вы сможете привести эту часть организации в порядок? Должно быть, кто-то допускает очень грубые промахи, блокируя большую часть коммуникационных линий. Это связано с какими-то этическими проблемами: кто-то не желает выполнять свои функции; кто-то так жмёт на тормоза, что вы чувствуете запах палёной резины. Надо переходить к этическим мерам.

Состояние Нормальной деятельности

Мы могли бы назвать состояние Нормальной деятельности «состоянием стабильности», и, вероятно, его следовало бы назвать состоянием стабильности, если бы не один нюанс: «Эта вселенная не допускает статичного состояния, при котором нет ни увеличения, ни уменьшения — совершенно стабильного состояния». Ничего подобного не существует во всей этой вселенной, ни в одном её уголке. Не существует ничего, что всегда оставалось бы неизменным».

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

Формула состояния Нормальной деятельности:

1.   Ничего не меняйте. Когда вы находитесь в состоянии Нормальной деятельности, вы поддерживаете увеличение тем, что ничего не меняете.

2.   Этика очень мягкая. Правосудие весьма мягкое и разумное. Не принимается никаких особо жёстких мер.

3.   Всякий раз, когда статистика улучшается, тщательно изучите её и выясните, что её улучшило. И затем делайте это, не прекращая делать то, что вы делали раньше. Это единственное, что вы меняете.

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

И вы просто маневрируете с учётом этих двух факторов: улучшения статистики и ухудшения статистики. Что-то было изменено. Вам лучше поскорее устранить это изменение. А когда вы обнаруживаете, что статистика улучшается, обязательно выясните, почему она улучшается.

Состояние Изобилия

Когда линия на графике статистики идёт круто вверх — это Изобилие. Неважно, идёт ли она круто вверх одну неделю или же она идёт круто вверх по сравнению с последней точкой неделю за неделей, — это Изобилие.

Когда у вас Изобилие — независимо от того, как вы его достигли, — применяется формула Изобилия.

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

Изобилие — это самое капризное состояние из всех. Ошибитесь при его определении или проходите его не в соответствии с формулой, и оно может убить вас! Это, как ни странно, самое опасное из всех состояний, поскольку, если вы не распознаете его и не примените формулу, от вас останется только мокрое место! Распознайте его точно и проходите его правильно — и вы наберёте космическую скорость.

Формула состояния Изобилия:

1.   Экономьте. Первое, что вы должны делать, находясь в Изобилии, — это экономить. И ни в коем случае не покупайте ничего, с чем связаны обязательства будущих выплат. Не покупайте ничего, с чем связаны обязательства на будущее, не нанимайте никого, если это связано с обязательствами на будущее, — ничего такого. Всё это входит в понятие «экономия». Установите строгий контроль.

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

3.   Вложите оставшиеся деньги в средства производства; расширьте свои возможности для предоставления.

4.   Выясните, что вызвало состояние Изобилия, и укрепите это.

Формула состояния Изобилия, относящаяся к действиям:

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

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

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

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

4.   Выясните для себя, что вызвало состояние Изобилия в той области, которая имеет к вам непосредственное отношение, и укрепите это.

Состояние Могущества

Статистика состояния Могущества — это статистика на очень высоком уровне; это совершенно новый уровень статистики, имеющей тренд Нормальной деятельности.

Статистика Могущества — это не просто такая статистика, которая идёт круто вверх в течение долгого времени. И это не просто очень высокая статистика. Могущество — это не что-то, продолжающееся одну неделю. Могущество — это тренд.

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

На этом новом уровне у вас время от времени могут происходить небольшие падения статистики. Но это всё равно Могущество.

Существует ещё одно важное данное, позволяющее правильно распознать и понять это состояние:

Почему мы называем это Могуществом?

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

Это и есть Могущество.

Можно задаться вопросом: «Сколько работы может выполнить один человек?» или «Сколько кирпичей в день может уложить один человек?»

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

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

Если он кладёт столько кирпичей, что никто никогда даже не подумает о его увольнении, то он в состоянии Могущества. Это состояние Могущества для отдельного человека.

Формула состояния Могущества:   1.   Не разрывайте связей. Первый закон состояния Могущества — не разрывайте связей. Это будет катастрофой и для вас, и для других.

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

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

2.   Составьте описание своей должности.

Так вот, состояние Могущества — это когда человек оказывается в состоянии Могущества или когда организация оказывается в состоянии Могущества. А состояние Смены Власти (или Смены Могущества) состоит на самом деле в том, что человек принимает должность, находившуюся в состоянии Могущества. Вы улавливаете разницу? Вы принимаете дела у Билла, который находился в состоянии Могущества. Так вот, когда он уходит, разрывает связи, тот, кто пришёл вместо него, оказывается в состоянии Смены Власти. И первое, что надо сделать человеку, переходящему на новый уровень Власти, или Могущества, — это описать все линии, относящиеся к его должности. Для него это единственный способ разорвать связи. А последующее принятие состояния Могущества — Смена Власти — подчиняется собственной формуле.

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

Так что первое, что надо сделать в состоянии Могущества, — это составить полное описание своей должности. Вы обнаружите, что если вы не сделаете этого, то на веки вечные останетесь привязанными к какой-то части своей должности. И годом позже или около того кто-нибудь всё ещё будет приходить к вам с вопросами по поводу той должности, которую вы занимали, потому что вы не составили её описания. Так что, составив описание своего поста, вы даёте возможность своему преемнику выполнить формулу состояния Смены Власти (то есть ничего не менять), потому что вы объяснили, что там уже есть, так что теперь он знает, чего не надо менять. Но если вы не составили описания должности, тогда он может внести какие-то изменения. И это самый верный способ оказаться приклеенным к какой-нибудь прежней должности, которую вы занимали, и никогда от неё не отделаться. И вы скажете: «Эти новые сотрудницы, которые стали секретарями приёмной, — от них никакого толку, и им на всё наплевать». Так вот, прежде чем мы станем слишком критичными, давайте-ка проверим. Мы когда-нибудь составляли описание этой должности? Ушли ли мы с этой должности по-настоящему? Оставили ли мы её в том состоянии, в котором её можно было оставить? А потом, уйдя с этой должности, что мы делали: просто не замечали её существования или же время от времени, проходя мимо, спрашивали человека: «Как дела?»

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

Сделайте всё, что можете, чтобы эту должность можно было занять. Рано или поздно кто-нибудь придёт и действительно займёт его.

Состояние Смены Власти

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

Что за везение — унаследовать кресло человека, который достиг успеха! Это просто песня! Это пара пустяков. Просто садитесь в него и ничего больше не делайте. Люди почему-то считают это предосудительным. Предполагается, что вы начнёте «делать всё по-своему». Предполагается, что вы «внесёте в работу свою индивидуальность». Нет! Садитесь в это кресло и ничего не делайте. Если пост находился в состоянии Нормальной деятельности (а скорее всего, так оно и было, поскольку кто-то был продвинут на более высокую должность), вы просто ничего не меняете.

Смена Власти: ничего не меняйте.

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

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

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

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

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

Формула состояния Смены Власти:

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

Формула исправления неправильно выполняемой Смены Власти

Неправильно выполняемая формула Смены Власти может вызвать состояние Опасности.

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

Формула исправления неправильно выполняемой Смены Власти

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

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

3.   Внедрите успешные действия.

4.   Отбросьте неудачные действия.

5.   Прекратите лихорадочные попытки «справляться» или защищаться.

6.   Вернитесь к работающей структуре, делая это с умом.

Студентам и интересующимся

Для Sublime Text 3 есть плагин синхронизации настроек Sync Settings, который сохраняет настройки в gist и позволяет синхронизировать через такой gist настройки ST3 на разных компьютерах. Синхронизируются файлы из папки пользователя, которые можно посмотреть, вызвав из выпадающего меню: Preferences → Browse Packages (откроется файловый менеджер, будет видна папка User — это и есть папка пользователя).

Чтобы получить мои настройки, нужно:

1. Установить Package Control

Смотрите выпадающее меню Preferences, если есть пункты Package Control — пропускайте шаг.

Установка Package Control элементарна.

2. Установить Sync Settings

Как и с любым другим плагином:

• Ctrl+Shift+P, набираем install, вызываем пункт Package Control: Install Package,
• ждем появления модального окна со списком доступных плагинов,
• набираем Sync Settings и выбираем пункт с ним.

3. Генерируем новый токен

Нужна регистрация на github.com (этобесплатноБЕЗСМС). Имя токена — что-то вроде «ST3 sync settings», права — работа с gist (ставим галочку рядом с пунктом «gist»).

4. Форкаем мои настройки

Переходим к gist-у с моими настройками и жмем кнопку Fork , чтобы у вас появилась их копия.

5. Настроим ваш Sync Settings

Идем в Preferences → Package Settings → Sync Settings → Settings — Default, выделяем всё и копируем в буфер.

Идем в Preferences → Package Settings → Sync Settings → Settings — User, вставляем из буфера.

Заполняем поля “access_token” (вы генерировали его раньше, копипастим) и “gist_id” (это конечная часть URL-а вашего gist-а с настройками, примерно такая: c42616451fe9f8534b5cfd23195265e8).

6. Стянем настройки

Ctrl+Shift+P, находим и вызываем пункт Sync Settings: Download, ждем некоторое время (на быстром канале — в пределах 2-х минут) пока скачаются настройки и установятся все плагины.

Как пользоваться

1. Пройтись по настройкам, поменять что-то для себя
2. Посмотреть какие плагины стоят, возможно, добавить свои.

После изменений отправить свой настройки в свой гист: Ctrl+Shift+P, находим и вызываем пункт Sync Settings: Upload.

• ШПАРГАЛКА ПО ВСЕМ ТРУДНОСТЯМ АНГЛИЙСКОГО ЯЗЫКА

http://bomba.co/luchshaya-shpargalka-po-anglijskomu-yazyku/?fb_ref=group_post

• Множественное число существительных в английском языке

https://www.native-english.ru/grammar/english-nouns-plural

• Артикли в английском языке

https://www.native-english.ru/grammar/english-articles

• Have и have got: различия, использование, формы

https://enginform.com/article/have-i-have-got-razlichiya-ispolzovanie-formi

• Как составить английское вопросительное предложение https://englishfull.ru/grammatika/voprositelnie-predlozheniya.html
• Отрицательные предложения в английском языке

http://www.correctenglish.ru/theory/grammar/negative-structures/

• Good и Well: правила употребления, перевод, пример, отличие, разница в значении

http://www.correctenglish.ru/mistakes/vocabulary/good-well/

• Can или May? / Can versus May

https://www.englishelp.ru/learn-english/articles-for-learners/187-can-versus-may.html

• Местоимения some, any, no

https://englsecrets.ru/anglijskij-dlya-nachinayushhix/mestoimeniya-some-any-no.html

• Употребление some, any, no в английском языке

http://engblog.ru/some-any-no

• Конструкции there is и there are в английских предложениях. Правила употребления

https://easyspeak.ru/blog/vsyo-o-grammatike/there-is-there-are-v-anglijscom-predlogenii

• Правило Present Simple и Future Simple

https://obrazovaka.ru/english/present-simple-i-future-simple-pravila-primery.html

• Времена группы Simple — The Future Simple Tense / Будущее простое время

https://www.englishelp.ru/learn-english/grammar/24-the-future-simple-tense.html

• Степени сравнения прилагательных и наречий (Degrees of comparison)

https://grammarway.com/ru/degrees-of-comparison

• Атрибутивные словосочетания

https://studfiles.net/preview/4533437/

• Притяжательный падеж существительных в английском языке (Possessive Case of Nouns)

http://study-english.info/noun-possessive-case.php

• Падежи существительных в английском языке

https://www.native-english.ru/grammar/english-nouns-cases

• Модальные глаголы Shall, Will

https://www.native-english.ru/grammar/modal-verb-shall-will

• Shall умер! Да здравствует только Will!

http://www.study.ru/support/lib/note308.html

Update 20.12.2018 =======================

• Past Simple — простое прошедшее время

https://www.native-english.ru/grammar/past-simple

• Сравнительная конструкция as… as (с примерами)

https://enginform.com/article/sravnitelnaya-konstruktsiya-as-as

• Phrases with as … as … — Informal English

https://www.englisch-hilfen.de/en/words/phrases_as_as.htm

• Различные способы сказать “Зарабатывать на жизнь”

https://wooordhunt.ru/word/%D0%B7%D0%B0%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D1%82%D1%8C

• В чем разница между older, oldest и elder, eldest?

https://easyspeak.ru/blog/v-chem-raznica-mezhdu/v-chem-raznica-mezhdu-older-oldest-i-elder-eldest

• В чем разница между also, as well, too и either?

https://easyspeak.ru/blog/v-chem-raznica-mezhdu/v-chem-raznica-mezhdu-also-as-well-too-i-either

• Dinner или supper? Как называть правильно приемы пищи —

http://www.study.ru/support/oh/39.html

http://english-da.ru/slovar/all-eat

Update 21.12.2018 =======================

• В чем разница между say, tell, speak и talk?

https://easyspeak.ru/blog/v-chem-raznica-mezhdu/v-chem-raznica-mezhdu-say-tell-speak-i-talk

Update 24.12.2018 ======================

• Артикли с географическими названиями

http://www.dinternal.com.ua/grammar/articles/articles-4/

• Отличия смысла слов film, movie и cinema

https://hinative.com/ru/questions/539022

• Порядок прилагательных в английском языке

https://www.native-english.ru/grammar/adjectives-order

• Притяжательные местоимения в английском языке

https://www.native-english.ru/grammar/possessive-pronouns

Update 27.12.2018 =======================

• Особенности употребления прилагательных stout, fat, fleshy, plump

https://www.native-english.ru/vocabulary/stout-fat-fleshy-plump

• Английские политически корректные слова и словосочетания с переводом на русский язык

http://study-english.info/vocabulary-politically-correct.php

Update 28.01.2018 =======================

• Наречия частотности в английском языке

https://situationalenglish.blogspot.com/2015/07/narechia-chastotnosti-anglijskii-yazyk.html

• Предлоги времени

http://engblog.ru/prepositions-of-time

Update 30.01.2018 ======================

• Как сказать сколько времени на английском

http://study-english.info/phrases-time.php

• Разница в правописании между американским и британским английским

http://www.correctenglish.ru/theory/writing/spelling-differences/

Update 11.02.2018 ======================

• Сочетания AI, AY, AU, AW, OA, OI, OY, OU, OW

https://englishsimple.ru/pronunciation/diphthongs/

• Окончание -ish, добавленное к прилагательным цвета, означает легкость, слабую насыщенность

reddishblueishgreenish

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

Соотношение сторон представляет собой дробь — отношение ширины к высоте. Возьмем, к примеру, изображение или видеофайл с разрешением FullHD 1920x1080 точек. 1920/1080 — если упрощать эту дробь, то получим 16/9, стандартное кинематографическое соотношение сторон. У изображения (или видео) с физическим размером 1024x768 точек эта пропорция равна 4/3.

Изменение размера

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

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

Интерполяция изображения

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

Грубо говоря — попытавшись растянуть картинку размером 100*100 пикселей до размера 150*150 пикселей, мы заставим браузер “досочинить” недостающие пиксели, примерно глядя на соседние. Результатом будет потеря качества изображения.

Искажение пропорций

<body> 
    <img src="images/redcat.jpg" alt="Размеры не заданы"> 
    <img src="images/redcat.jpg" alt="Задана ширина" width="400"> 
    <img src="images/redcat.jpg" alt="Задана ширина и высота" width="400" height="400"> 
</body>

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

Расчет пропорций

Как изменить размер изображения не исказив его? Нужно учитывать пропорции и изменив, к примеру, ширину — высоту ставить не произвольную, а в том же соотношении к ширине, что и в исходных данных. Чтобы не считать вручную — можно воспользоваться онлайн калькулятором, которых множество — http://alittlebit.ru/tools/proportsii-izobrazheniya/ , https://ciox.ru/aspect-ratio , http://dimavolkov.ru/resize/index.html . Гуглятся по запросу “пропорции изображения калькулятор”.

Изображение в блоке

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

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

Идеальный вариант

Идеальный вариант — пропорции контейнера и изображения совпадают. К примеру — изображение 1280*800 пикселей и контейнер 640*400. Считаем — 1280/800=1.6, 640/400=1.6. 1.6=1.6. Profit! Это изображение можно вместить в этот контейнер без пустых зон, искажения и обрезки частей.

Реальный вариант

Однако, к сожалению, идеального в нашем мире не так много, как хотелось бы. Поэтому вариант следующий — неидеальный, но реальный. Контейнер квадратный, или приближенный к квадрату, например 420*400 пикселей. Посчитаем сразу пропорции — 420/400=1,05. Изображение наш уважаемый Пользователь загружает размером 640*480 пикселей. Пропорции выходят 640/480=4/3=1,333(3).

Имея исходные данные, рассмотрим способы размещения данного изображения в данный контейнер. Клиент может хотеть идеального совпадения, но давайте посчитаем — 1,05 = 1,333(3). Возможно ли такое равенство? Ответ можете дать сами. Математика в нашей вселенной строга, неподкупна и одна для всех.

Что ж, если идеально — никак, то как же можно? Есть ровно ТРИ СПОСОБА.

Способ первый, совсем плохой

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

Способ второй — пустое пространство

Размещение по большей величине. Берем бОльшую величину (в нашем случае — ширину) и делаем ее равной аналогичному параметру контейнера (ширине). А вот второй параметр расчитываем пропорционально, сами или воспользовавшись упомянутыми калькуляторами. Ширина контейнера — 420px. Подогнав изображение до той же величины, чтобы сохранить пропорции, высоту мы должны дать 315px.

Спонсор точного расчета — сайт http://alittlebit.ru/tools/proportsii-izobrazheniya/.

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

Способ третий — обрезка части изображения

Размещение по меньшей величине. В этом способе в качестве базовой величины мы берем меньшее число, в нашем случае — высоту. Высота контейнера — 400px. Уже знакомым калькулятором пропорционально рассчитываем второй параметр

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

Вывод

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

Инструменты и приемы для верстальщика

Прием с background-image — как НЕЛЬЗЯ делать

Проблема адаптивного контейнера

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

Велик соблазн задать контейнеру нужные размеры, а изображение разместить задним фоном, через свойство css background-image. Это очень плохо, то, что называется bad practice, делать подобное нельзя никогда. Точнее можно, но только в одном случае — если изображение в самом деле несет функцию исключительно фоновую, декоративную. Если смысловая нагрузка размещенного изображения отличается от нуля (изображение товара, картинка в контенте, иллюстрация в редактируемом блоке) — оно не должно быть фоном.

Почему нельзя использовать background-image для изображений со смыслом?

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

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

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

Если вам досталась правка сайта с background-image в блоке

Если вам так повезло, что перед вами именно такой сайт, с разносторонней адаптацией блока и изображением в нем, подставленным через стили — можно применить лайфхак: не трогать стили и адаптацию — наверняка сайт выглядит красиво, а наш принцип “не навреди”. Вместо этого добавьте в блок тег <img>, выведите туда изображение, родителю установите overflow: hidden; (чтобы не поломалась верстка), и задайте изображению opacity: 0;

Что же получается? И семантика соблюдена (изображение в блоке есть, может быть индексировано и распарсено), и хитрую адаптацию переделывать не пришлось. НО! Это лишь для правок, при верстке настоящие индейцы так не делают!

Адаптивный блок с изображением/видео (неизменные пропорции)

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

Приступим.

1. Изображение (видео) обернем в отдельный блок, если это еще не сделано. Именно он и будет адаптироваться.

<div class="thumb-wrap">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

2. Пропишем стили:

.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

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

Имитация поведения background-size с применением javascript (для настоящих индейцев)

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

Использовать мы будем очень небольшой (1,9kb) плагин. Написан он был давно, когда в ходу был IE версии ниже 9, который не понимал прекрасное свойство background-size. Несмотря на почтенный возраст, и немного не те цели применения изначально, он — то что нам нужно. Приступим.

Страница проекта на GitHUB https://github.com/aramk/CSS-Background-Size-jQuery-Plugin

1. Рективацию скрипта повесим на ресайз окна. Первый вызов осуществим имитацией ресайза. Простой вызов события resize(), как показала практика, срабатывает не всегда безотказно. Чтобы он срабатывало всегда и везде — создадим пользовательское событие (его можно применять не только для описываемой ситуации, но и всегда, когда нужно ):

//Universal resize event 
function universalResize() { 
 if(typeof(Event) === 'function') {
  // modern browsers 
  window.dispatchEvent(new Event('resize')); 
 } else { 
  // for IE and other old browsers 
  // causes deprecation warning on modern browsers 
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt); 
 } 
};

Теперь при вызове функции universalResize() всегда выстрелит событие изменения размера окна.

Аналогичным образом, кстати, можно создать ЛЮБОЕ кастомное событие, и вызывать его для срабатывания функций-обработчиков.

2. Подключаем плагин к селектору класса:

$window.resize(function() {
 $('.background-size-cover').bgdSize('cover');
$('.background-size-contain').bgdSize('contain');
});
// Вызываем вышеупомянутую функцию. 
universalResize();

Если блоки с изображения подтягиваются по ajax — то на срабатывание события complete добавляем такую инициализацию:

complete: function() {
 $(".background-size-cover").one("load", function() {
        $(this).removeAttr('style').bgdSize('cover');
    }).each(function() {
        if(this.complete) $(this).load();
    });
$(".background-size-contain").one("load", function() {
        $(this).removeAttr('style').bgdSize('contain');
    }).each(function() {
        if(this.complete) $(this).load();
    });
}

Такая хитрая запись позволяет вызвать функцию именно после загрузки изображения, а не после построения DOM. Берите на заметку.

Все готово! Изображениям, которым требуется поведение аналогичное background-size просто добавляем классы .background-size-cover или .background-size-contain.

Стили для контейнеров и изображений

Часто мы встречаемся с ситуацией, когда изображение обернуто в тег <a href=”…….”> для срабатывания различных галерей и тому подобного. Подобное решение требует некоторого внимания в стилях. Изображение, точнее тег <img> — элемент строчно-блочный (inline-block), в то время как <a href=”…….”> — просто инлайновый. Оборачивать inline-block в строку не семантично, а значит элементу <a> мы должны задать свойство display:inline-block;. Кроме семантики тут есть и элементарная логика — изображение имеет параметры высоты и ширины, и оборачивать его в СТРОКУ неверно. К тому же зачастую ширина и высота изображения относительны (задаются в процентах), а какие проценты ширины можно взять от строки?

Еще одна практика — задавать img стили {width: 100%; height: auto;}. И все идет хорошо, пока ширина изображения больше ширины контейнера и изображение имеет ширину бОльшую чем высоту. Однако как только в контейнер попадает изображение с исходными размерами меньше, чем сам контейнер — его растягивает и оно становится как минимум некрасивым. Если же его высота больше, чем ширина (двери, оконные рамы, одежда) то часть изображения еще и выйдет за пределы контейнера, попытавшись увеличиться пропорционально ширине.

Чтобы таких неприятных неожиданностей не случалось — не задавайте ширину жестко, пропишите {max-width: 100%; max-height: 100%}.