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

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

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

Они страстно желали чего-либо и направляли весь огонь своей души на это. И жизнь исполняла их желания.

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

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

Правила техник

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

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

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

Благодаря им можно очистить голову от посторонних мыслей и концентрироваться на представляемой картинке.

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

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

Правило 4: Надо ощущать представляемую реальность. Здесь придется напрячь все свое воображение. Но надо постараться задействовать чувства – почувствовать запах, ощутить желаемый предмет (если это предмет) на ощупь, представить вкус, услышать звуки. На первых порах это очень трудно, но постепенными тренировками можно развить воображение и тогда будет нетрудно визуализировать желаемую действительность. Развить воображение помогают методики М. Норбекова.

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

Правило 6: самое трудная часть, но и самая краеугольная.

Желание надо представить, ощутить, прочувствовать, порадоваться обладанию им и отпустить.

Как правило, именно на этом этапе случаются трудности, ведущие к неудачам. Отпустить желание – не означает перестать о нем думать и представлять. Это значит перестать о нем беспокоиться, думать о том сбудется оно или нет.

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

Особое замечание

Самое важное – после осуществления визуализации должно оставаться радостное чувство. На первых порах надо создавать его искусственно. Положительные эмоции усиливают энергию визуализации.

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

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

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

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

Доска желаний

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

Вообще доску можно сделать разными способами. Она может быть вполне реальной или компьютерной.

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

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

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

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

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

Методы симорона

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

Особенно эффективно действуют волшебные спички. Чтобы их сделать, надо взять коробок спичек и наклеить на них этикетку с надписью «волшебные спички». Далее спички надо зарядить на исполнение желаний. Делается это просто – зажигается спичка и загадывается простоте желание, которое просто осуществить. Это может быть покупка шоколадного мороженого или поход на улицу. Желание сбывается со стопроцентной гарантией. Это действие повторяется несколько раз и спички считаются волшебными. После этого можно зажигать спичку и визуализировать свое желание. Оно гарантировано сбудется.

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

Ошибки

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

• Нельзя работать с ними в плохом настроении. Нельзя отвлекаться на посторонние мысли и нельзя сомневаться в результате. Сомнения ослабляют энергию и желание не сбывается.
• Другая причина – на самом деле желание человеку не нужно. Звучит парадоксально, но это частая ситуация. Поэтому перед тем, как загадывать желание надо разобраться – нужно ли оно или что-то другое.

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

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

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

26 мая 2014 в 20:08

Рендеринг WEB-страницы: что об этом должен знать front-end разработчик

• Разработка веб-сайтов ,
• JavaScript

Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.

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

Процесс обработки WEB-страницы браузером

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

1. Из полученного от сервера HTML-документа формируется DOM (Document Object Model).
2. Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).
3. На основе DOM и CSSOM формируется дерево рендеринга, или render tree - набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko - «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например - , или элементы со стилем display:none;). Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитанный для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.
4. Для каждого элемента render tree рассчитывается положение на странице - происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов требуется больше).
5. Наконец, происходит отрисовка всего этого добра в браузере - painting.

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

Repaint

В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color , border-color , visibility), браузер просто отрисовывает его заново, с учётом нового стиля - происходит repaint (или restyle).

Reflow

Если же изменения затрагивают содержимое, структуру документа, положение элементов - происходит reflow (или relayout). Причинами таких изменений обычно являются:

• Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
• Изменение содержимого, в т.ч. текста в полях форм;
• Расчёт или изменение CSS-свойств;
• Добавление, удаление таблиц стилей;
• Манипуляции с атрибутом « class »;
• Манипуляции с окном браузера - изменения размеров, прокрутка;
• Активация псевдо-классов (например, :hover).

Оптимизация со стороны браузера

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

Ещё одна особенность - во время выполнения JavaScript браузеры кэшируют вносимые изменения, и применяют их в один проход по завершению работы блока кода. Например, в ходе выполнения данного кода произойдет только один reflow и repaint:

Var $body = $("body"); $body.css("padding", "1px"); // reflow, repaint $body.css("color", "red"); // repaint $body.css("margin", "2px"); // reflow, repaint // На самом деле произойдет только 1 reflow и repaint
Однако, как описано выше, обращение к свойствам элементов вызовет принудительный reflow. То есть, если мы в приведённый блок кода добавим обращение к свойству элемента, это вызовет лишний reflow:

Var $body = $("body"); $body.css("padding", "1px"); $body.css("padding"); // обращение к свойству, принудительный reflow $body.css("color", "red"); $body.css("margin", "2px");
В итоге мы получим 2 reflow вместо одного. Поэтому, обращения к свойствам элементов по возможности нужно группировать в одном месте, дабы оптимизировать производительность (см. ).

Но, на практике встречаются ситуации, когда без принудительного reflow не обойтись. Допустим, у нас есть задача: к элементу нужно применить одно и то же свойство (возьмём « margin-left ») сначала без анимации (установить в 100px), а затем - анимировать посредством transition в значение 50px . Можете сразу посмотреть этот пример на JSBin , но я распишу его и тут.
Для начала заведём класс с transition:

Has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; }
Затем, попробуем реализовать задуманное следующим образом:

Var $targetElem = $("#targetElemId"); // наш элемент, по умолчанию у него присутствует класс "has-transition" // убираем класс с transition $targetElem.removeClass("has-transition"); // меняем свойство, ожидая, что transition отключён, ведь мы убрали класс $targetElem.css("margin-left", 100); // ставим класс с transition на место $targetElem.addClass("has-transition"); // меняем свойство $targetElem.css("margin-left", 50);
Данное решение не будет работать, как ожидается, т.к. изменения кэшируются и применяются только в конце блока кода. Нас выручит принудительный reflow, в результате код приобретёт следующий вид, и будет в точности выполнять поставленную задачу:

// убираем класс с transition $(this).removeClass("has-transition"); // меняем свойство $(this).css("margin-left", 100); // принудительно вызываем reflow, изменения в классе и свойстве будут применены сразу $(this).offsetHeight; // как пример, можно использовать любое обращение к свойствам // ставим класс с transition на место $(this).addClass("has-transition"); // меняем свойство $(this).css("margin-left", 50);

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

• Пишите валидный HTML и CSS, с указанием кодировки. Стили лучше включать в , а скрипты - в конце .
• Стремитесь упрощать и оптимизировать селекторы CSS (этим часто пренебрегают разработчики, использующие препроцессоры). Чем меньше вложенность - тем лучше. По эффективности обработки селекторы можно расположить в следующем порядке (начиная с наиболее быстрого):
  1. Идентификатор: #id
  2. Класс: .class
  3. Тэг: div
  4. Соседний селектор: a + i
  5. Дочерний селектор: ul > li
  6. Универсальный селектор: *
  7. Селектор атрибутов: input
  8. Всевдоэлементы и псевдоклассы: a:hover
  Следует помнить, что браузер обрабатывает селекторы справа налево, поэтому в качестве ключевого (крайнего правого) селектора лучше использовать наиболее эффективные - идентификатор и класс.
  div * {...} // плохо.list li {...} // плохо.list-item {...} // хорошо #list .list-item {...} // хорошо
• В скриптах минимизируйте любую работу с DOM. Кэшируйте всё: свойства, объекты, если подразумевается повторное их использование. При сложных манипуляциях разумно работать с «offline» элементом (т.е. который находится не в DOM, а в памяти), с последующим помещением его в DOM.
• При использовании jQuery для выборки элементов придерживайтесь

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

Чтобы это можно было сделать, мы разработали инструмент при создании вопросов в конструкторе шаблона.

Как настроить

Мобильное устройство умеет показывать html и даёт выполнять ему заданный Javascript, а также может показывать те файлы (картинки), на который заранее объявлены ссылки. Сложность написания таких визуализаций минимальна - можно использовать уроки HTML из интернета.

Визуализации при заполнении на сайте нет.

Чтобы настроить пользовательскую визуализацию, необходимо:

1. В редактировании вопроса нажать на иконку html5

2. Откроется конструктор визуализации, в котором есть три редактора: CSS | HTML | JAVASCRIPT, описание JSON объекта, который будет передан на старт визуализации, загрузчик файлов и выбор подключаемых расширений Javascript.

Общий принцип работы

Окно Html. По умолчанию содержит div с id="htmlview-maincontainer". Рекомендуется помещать всю визуализацию в него. При написании html можно руководствоваться всей фантазией, но нужно иметь в виду два момента:
1) Мы не проверяем валидность вашего HTML. Ошибки, неточности в вёрстке, целенаправленная вставка вредоносного кода скорее всего приведут к одному результату - ваши интервьюеры не смогут пройти анкету на мобильном устройстве.
2) Любые ссылки, как так и адреса картинок будут игнорироваться мобильным приложением, используйте код загруженного вами файла (например {{img0}}), при отправке на мобильное устройство, он будет заменён на ссылку на этот файл и добавлен в список разрешенных ссылок для мобильного устройства.

Окно CSS. Напишите сюда таблицу стилей CSS, она будет помещена в тег head при отправке на устройство. Руководствуйтесь теми же правилами, что и для HTML.

Окно JavaScript. Поместите сюда исполняемый код, который поможет вам реализовать любую анимацию или логику. В Javascript есть несколько ключевых моментов.
1) function StartQuestionHtmlView(field) - функция, которая будет вызвана нашей системой, когда страница полностью загрузится. Входной параметр field - это данные о вопросе, для каждого типа вопроса данные свои. Например для уточняющего вопроса туда будут переданы варианты ответа, которые выделил или не выделил пользователь при прохождении родительского вопроса.
2) SetAnswer(result) - системная функция, которая сообщает мобильному устройству какой ответ был дан на данный вопрос. Если этот ответ удовлетворяет всем правилам валидации, то функция вернёт 0.
3) NextQuestion() - системная функция вызывающая переход на следующий вопрос
4) function SetOldAnswer(oldAnswer) - система вызовет эту функцию, если данный вопрос был открыт повторно, в качестве параметра будет передан такой же объект, как тот что вы отправляете в SetAnswer.

Объекты ответов, которые ожидает увидеть система

1. Текст/Дата/Шкала - строка, которая содержит ответ
2. Число - { native: string, exact: string }, где native - это ID варианта ответа (вы задаёте его при добавлении диапазонов, а так же вам выдаст его система при StartQuestionHtmlView), а exact должен содержать строку точного значения.
3. Выбор вариантов/Уточняющий - [{native: string, other: string},{}...], массив ответов, где каждый ответ - это объект, где native - это ID варианта ответа (вы задаёте его при добавлении вариантов, а также вам выдаст его система при StartQuestionHtmlView); other должен содержать строку ответа на ответ типа "Другое".
4. Сетка - [{row:string,column:string, other: string },{}...] массив из объектов с ID колонки, ID строки и ответом "Другое" если таковой имеется (ID колонки можно посмотреть в примере JSON который передаётся на вход визуализации).

Дополнительные возможности

1. Вкладка JSON - пример объекта, который будет передан вам на вход визуализации
2. Файлы - прикреплённые к визуализации файлы. На данный момент поддерживаются только картинки.
3. Расширения - большинство людей используют разнообразные js фреймворки для работы с Javascript, мы позволяем добавлять их в визуализацию. Доступные расширения:

1) Jquery - в представлении не нуждается
2) Jquery-ui 1.10.4 - набор стандартных контролов
3) jQuery Mobile 1.4 - обёртка для создания интерфейсов приближённых к мобильным приложениям
4) jQuery UI Touch Punch - помогает устройству передать именно тач управления в контролы jquery

Предпросмотр созданного вопроса

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

Форматирование кода

При нажатии кнопки "Формат" система отформатирует ваш код в соответствии с общепринятыми правилами (открывающаяся и закрывающаяся скобки в отдельных строках друг под другом и т.д.)

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

Навигация по сайту

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

1. Правило 3 кликов

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

2. Поиск, «хлебные крошки» и карта сайта

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