Верстка сайта по макету

Шрифты

Стандартных шрифтов достаточно для 99% сайтов. Но, как обычно, всё упирается либо в буйную фантазию клиента, которому нужен нескучный сайт, либо в творческую личность дизайнера, который хочет использовать все шрифты, которые он когда-то скачал в наборе «1000 восхитительных шрифтов». 

Однако есть формула, позволяющая вычислить пользу (P) от использования сторонних шрифтов:

Где F — количество сторонних шрифтов, M — количество макетов, S — зарплата дизайнера, а G = 0.

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

Иконки

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

Как применять кластерный анализ в трейдинге?

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

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

Теперь о каждом варианте использования подробнее с примерами.

Профиль дельты

На мой взгляд, профиль дельты — это настоящий «грааль», поскольку он интерпретирует значения из ленты прямо на кластерный график. Теперь вам не нужно учиться читать поток ордеров, достаточно установить удобное ПО и начать работать. Дельту часто принято рассматривать в виде паттернов. Рассмотрим их для ознакомления:

1. буква «P» — когда положительная дельта сосредоточена в верхней части свечи, а внизу мало операций (разворотный бычий сигнал);

2. буква «b» — теперь весь поток приходится на продажи в нижней части, а на верхах все более спокойно (медвежий сигнал).

Более наглядно на графике — фьючерс на евро, 22 февраля 2018.

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

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

Теперь пример очень интересных продаж от 21 февраля 2018 по евро, который показывает, что не все так однозначно и нужно следить именно за дельтой, а не самим паттерном.

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

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

Кластер-профиль

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

Пример. Фьючерс на австралийский доллар 22 февраля 2019.

Как видите, есть крупные объемы на уровне 0.7114 — 154, и затем на 0.7111 — три раза по 100-150 (отмечено красными стрелками). В итоге, продавцы по этим ценам держат позиции, не давая активу расти выше.

Есть в этой теории и несколько проблем:

1. Зачем крупному участнику покупать актив по одной и той же цене, когда можно это делать постепенно по нескольким разным котировкам в диапазоне?

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

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

Тем не менее, иногда кластер может работать, особенно, если актив покупает инвестор в долгосрочной перспективе, который просто кинул огромный limit-ордер или сразу купил в market. Есть вероятность, что толпа подхватит такое движение, а потом этот уровень будут оборонять другие покупатели или продавцы.

Как заработать с PROFI.RU

Выбирайте подходящие вам заказы

Это не обычная вакансия по специальности «верстальщики» — на PROFI.RU вы работаете напрямую с клиентами и сами их выбираете. За месяц на нашем сайте клиенты оставили более 60 заказов по специальности «верстальщики». Вы получите уведомления и увидите все детали по свежим заказам из вашего района Санкт-Петербурга.

Оплатите отклик, отправьте ваше предложение

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

Для кого эта статья

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

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

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

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

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

Итак, поехали.

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

Прежде, чем дать определение кластерам, стоит разобраться с понятием «профиль рынка». Он в отличие от стандартного индикатора Volumes показывает объем контрактов, совершенных на определенных ценовых уровнях. Если это тиковый объем на Forex, то соответственно учитываются только они, а не реальный поток сделок. Вот как наглядно выглядит профиль рынка в терминале NinjaTrader 8 cMZPack (есть trial-версия).

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

Для наглядности также покажу вам вариант от Volfix, он наиболее удобен в использовании (есть trial-доступ на 14 дней).

К сожалению, бесплатных способов использования профиля и кластеров не так уж много, в основном — это пробные версии на 1-2 недели, либо крайне отсталый функционал. Лучшие варианты (платные):

  • Volfix — оптимальный выбор, его использует большинство опытных трейдеров (от $ 60 в месяц);
  • NinjaTrader (от $ 225 за квартал);
  • ClusterDelta ($ 7,5 в месяц);
  • SBPro ($ 100 единоразово).

Для MetaTrader 4 под Forex есть платные и free-версии индикаторов с профилем объема, но о кластерах тут можно забыть, только одно название:

  • продукты ClusterDelta (сейчас тоже $ 7,5 в месяц, несколько лет назад был бесплатным);
  • индикатор TPO-v3 (бесплатно);
  • HighVolumeBar-VerticalHistogram-v2 (бесплатно).

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

Адаптивность

Здесь 2 источника проблем для дизайнера:

  1. Клиент, который сэкономил на дизайнере и заказал макет только для одного разрешения.
  2. Дизайнер, не имеющий понимания механизма адаптивности.

В идеале нужно иметь в виду популярные разрешения экрана (можно узнать, например, в статистике mail.ru), а также уточнить у верстальщика, какой grid-фреймворк он использует. Допустим, я обычно использую grid-фреймворк, который имеет 12 колонок, две контрольные точки: 600px для мобильных устройств, 993px для планшетов, а максимальная ширина контейнера — 1280px.

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

Масштаб

Бывает такое, что макет имеет неверный масштаб. Например, макет, который должен иметь ширину 960px, дизайнер может сделать шириной 1920. 

«А что такого?» — спросит дизайнер. 

Ничего особенного, просто верстальщику придётся делать лишнюю работу: приводить все значения (кегль, отступы, размеры блоков и пр.) к нормальному виду. 

«Уменьши размер изображения один раз и макет будет в нормальном масштабе» — скажет дизайнер.

Здравая мысль. Но почему она не пришла ему раньше? Да потому, что если привести макет к нормальному масштабу, то могут всплыть косяки. Например, мне однажды прислали макет сайта для экрана шириной 480px. И он нормально смотрелся. Ровно до тех пор, пока я не уменьшил макет действительно до 480px и не примерил его для смартфона с 5-дюймовым экраном.

Изображения

Хорошие браузеры начали поддерживать прозрачность PNG задолго до того, как многие верстальщики сдали ЕГЭ. Поэтому, если в макете используются какие-то иллюстрации, фон которых зависит от цвета фона блока (особенно если этот цвет меняется динамически, например, при наведении), в котором он находится, то в макете такая иллюстрация должна быть с прозрачным фоном. 

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

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

Ссылка на основную публикацию