В последнее время рост числа утилитарных инструментов, таких как Tailwind CSS, сделал это для CSS, а теперь Alpine.js обещает нечто подобное для JavaScript.

В этой статье мы подробнее рассмотрим Alpine.js (Github) и то, как он может заменить JQuery или более крупные библиотеки JavaScript для создания интерактивных веб-сайтов. Если вы регулярно создаете сайты, которые требуют добавления Javascript для изменения пользовательского интерфейса в зависимости от взаимодействия с пользователем, то эта статья для вас.

На протяжении всей статьи мы будем ссылаться на Vue.js, но не стоит переживать, если у вас нет опыта работы с Vue — он не потребуется. Фактически, часть того, что делает Alpine.js таким впечатляющим, заключается в том, что вам вообще не нужно знать JavaScript.

Теперь давайте начнем.

Что Такое Alpine.Js?

По словам автора проекта Caleb Porzio:

«Alpine.js предлагает вам реактивный и декларативный характер больших фреймворков, таких как Vue или React, за гораздо меньшую «стоимость».

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

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

See the Pen VwvQNPq by Anton (@federro) on CodePen.

Это превосходно работает. Но этот стиль кодирования, когда мы точно сообщаем браузеру, что делать (императивное кодирование), может быть ограничен. Разработчики решили эту проблему, обратившись к таким фреймворкам, как Vue, Angular и React. Они позволяют нам писать более чистый код, используя виртуальный DOM: своего рода зеркало пользовательского интерфейса, хранящегося в памяти браузера. В результате вы «скрываете» элемент DOM (например, вкладку) в одной из этих структур; он не добавляет display:none; атрибут стиля, а вместо этого последний буквально исчезает из «реального» DOM.

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

Как и Vue и React, Alpine.js позволяет нам писать декларативный код, но использует «реальный» DOM. И весит он всего лишь 6Кб.

Когда стоит использовать Alpine.js?

Мощь Alpine.js заключается в простоте манипулирования DOM. Вспомните о тех вещах, которые вы использовали из коробки с Bootstrap – Alpine.js отлично подходит для них. Примерами здесь могут быть:

• Отображение и скрытие DOM-узлов при определенных условиях,
• Обязательный пользовательский ввод,
• Прослушивание событий и изменение пользовательского интерфейса,
• Добавление классов.

Вы также можете использовать Alpine.js для шаблонов, если ваши данные доступны в JSON, но это тема для отдельной статьи.

Если же ваш проект гораздо масштабнее, то стоит присмотреться к Vue, React и Angular.

Синтаксис Alpine.js почти полностью перенят у Vue.js. Всего существует 13 директив. Мы рассмотрим большинство из них в следующих примерах.

Начнем знакомство

Как во Vue и jQuery, процесс сборки не совершенно необязателен. В отличие от Vue, Alpine.js инициализируется сам, поэтому нет необходимости создавать новый экземпляр. Просто загрузите Alpine, и все готово.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js" defer></script>

Область действия любого данного компонента объявляется с использованием x-data директивы:

<div x-data="{ foo: 'bar' }">...</div>

Захват входных данных пользователя

x-model позволяет нам синхронизировать любой входной элемент со значениями, установленными с помощью x-data. В следующем примере мы устанавливаем значение имени в пустую строку (внутри form тега). Используя x-model, мы привязываем это значение к полю ввода. Используя x-text, мы вводим значение в innerText элемент абзаца.

See the Pen GRpQLNb by Anton (@federro) on CodePen.

Это подчеркивает ключевые различия Alpine.js от jQuery и Vue.js.

Обновление тега абзаца в jQuery потребует от нас прослушивания определенных событий (keyup?), явного определения узла, который мы хотим обновить, и изменений, которые мы хотим внести. Синтаксис Alpine, с другой стороны, просто указывает, что должно произойти. Это то, что подразумевается под декларативным программированием.

Обновление абзаца в Vue, хотя и простое, потребует нового тега script:

new Vue({ el: '#app', data: { name: '' } });

Хотя это может не показаться существенным, однако подчеркивает первую крупную выгоду от Alpine. Здесь нет переключения контекста. Все сделано прямо в HTML — не нужно никакого дополнительного JavaScript.

События по нажатию, логические атрибуты и переключение классов

Как и в случае с Vue, : служит сокращением для x-bind (которое связывает атрибуты) и @ сокращением для x-on (которое указывает, что Alpine должен прослушивать события).

В следующем примере мы создаем экземпляр нового компонента с помощью x-data и устанавливаем значение по умолчанию, равное show false. Когда кнопка нажата, мы переключаем значение show. Когда это значение равно true, мы даем команду Alpine добавить aria-expanded атрибут.

x-bind работает по-разному для классов: мы передаем объект, где ключом является имя класса (active в нашем случае), а значением является логическое выражение (show).

See the Pen gOavywV by Anton (@federro) on CodePen.

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

Синтаксис показа и скрытия практически идентичен Vue.

See the Pen vYNdMKb by Anton (@federro) on CodePen.

Он установит для данного узла DOM значение display:none. Если вам нужно полностью удалить элемент DOM, то можно использовать x-if. Однако, поскольку Alpine.js не использует Virtual DOM, его x-if можно использовать только для <template></template> тега, который оборачивает скрываемый элемент.

Другие свойства

В дополнение к указанным выше директивам Alpine предоставляет дополнительные функции. Все это будет знакомо тем, кто работает с Vue.js.

• $el извлекает корневой компонент;
• $refs позволяет вам получить элемент DOM;
• $nextTick обеспечивает выполнение выражений только после того, как Alpine.js выполнит свою задачу;
• $event может использоваться для захвата события браузера.

See the Pen qBOxwZK by Anton (@federro) on CodePen.

Давайте создадим что-то полезное с Alpine.js

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

Чтобы это работало, мы могли бы добавить jQuery и Bootstrap.js, но это немного накладные расходы из-за небольшой функциональности. Мы могли бы написать это в Vanilla JS, но для чего? Давайте сделаем так, чтобы это работало с Alpine.js.

Сначала давайте установим область и некоторые начальные значения:

<body class="text-center text-white bg-dark h-100 d-flex flex-column" x-data="{ showModal: false, name: '', email: '', success: false }">

Теперь давайте заставим нашу кнопку устанавливать showModal значение true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

Когда showModal true, нам нужно отобразить модальный компонент и добавить несколько классов:

<div class="modal  fade text-dark" :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog">

Давайте свяжем входные значения с Alpine:

<input type="text" class="form-control" name="name" x-model="name" >
<input type="email" class="form-control" name="email" x-model="email" >

И отключим кнопку «Отправить», пока эти значения не будут заполнены:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

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

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

И получаем результат.

See the Pen BaoYbJM by Anton (@federro) on CodePen.

Выводы

Если вы создаете настоящий большой проект, то без серьезного фреймворка (Vue, React, Angular), вам вряд ли обойтись. Но если обширный функционал не требуется, то стоит обратить свой взор на Alpine.js. Легковесность и мощь этой библиотеки станут вашими хорошими друзьями.

Еще больше статей в нашем блоге

За главное изображение благодарность Varun

Сообщение Знакомимся с легкой и мощной Alpine.js появились сначала на Веб студия HashWeb.

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

Мы остановились на мысли о том, что надо дать возможность пользователю испытать позитивные чувства.

Сформировать свою индивидуальность на landing page

Большая часть наших решений действовать происходит на подсознательном уровне. Фактически, согласно исследованиям, люди формируют первоначальное впечатление о сайте за 50 миллисекунд. Это первоначальное впечатление сохраняется и дальше. Другими словами, брендинг и эстетика сайта формируют наши впечатления о конечном предложении, несмотря на отсутствие причинно-следственной связи между ними.

Так что же все это означает на практике? Для начала, это показывает, насколько важна эстетика. Однако, что более важно, это означает, что нам нужна четкая картина того, какие первые впечатления мы хотим передать, а затем быть уверенными, что дизайн нашего landing page делает именно это.

Определите, что вы хотите передать

Хорошей отправной точкой является создание краткого списка слов, которые передают впечатления, которые вы хотите, чтобы пользователи почувствовали, зайдя на ваш сайт. Естественно, что некоторые слова и фразы будут универсальными. Например, вы, вероятно, захотите, чтобы ваш landing page передавал «достоверность». Однако многие фразы в конечно варианте будут зависеть от вашей аудитории и предложения.

Проверка эстетики дизайна landing page

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

Теперь стоит убедиться в правильности визуальной иерархии.

Создайте свою визуальную иерархию

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

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

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

• Что предлагает эта страница?
• Как это поможет мне?
• Какими особенностями обладает предложение?
• Почему я должен доверять этой странице?
• Что я должен делать дальше?

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

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

Мы можем привлечь внимание к основным элементам экрана различными способами, например:

• Позиционирование
• Цвет
• Размер
• Визуализация и образность
• Анимация
• Пустое пространство

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

Упростите свой интерфейс

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

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

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

Если вы считаете, что содержимое слишком ценно для пользователя или помогает в конверсии, следующий вопрос, который вам нужно задать, — могу ли я скрыть этот элемент? Могу ли я разместить его на подстранице, под вкладкой или в аккордеоне?

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

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

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

Проверьте свою визуальную иерархию

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

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

Контролировать, проверять и тестировать ваш landing page

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

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

Отдельная благодарность catalyst за основное изображение

Сообщение Как создать привлекательный Landing page (часть 2) появились сначала на Веб студия HashWeb.

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

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

Определите вашу основную ценность

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

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

Например, ценностное предложение Skype:

«Скайп помогает всегда быть на связи. Разговоры. Чат. Совместная работа».

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

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

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

«Мы предлагаем высококачественную продукцию по доступной цене».

Противоположность была бы смешной

«Мы предлагаем продукты ужасного качества по высокой цене».

Таким образом, вы утверждаете очевидное! Однако, напротив, если бы вы написали:

«Мы предлагаем товары ручной работы для требовательного покупателя».

Противоположность также имела бы вполне осознанное значение:

«Мы предлагаем продукцию заводского производства для массового потребителя».

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

Сделав это, вы можете обратить свое внимание на призывы к действию.

Определите ваши призывы к действию

Каждый landing page нуждается в очевидных призывах к действию. Это означает, что вы должны спросить себя, что вы хотите, чтобы делали пользователи?

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

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

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

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

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

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

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

Как понять отказы пользователя landing page

Почему пользователь может перестать что-либо делать на вашей landing page? Может у вас платная доставка или вы не защищаете личные данные пользователя? А может вы просто дороже своих конкуретнов? Если вы не можете легко составить список причин отказа, которые могут возникнуть у пользователей, вам нужно провести некоторое исследование, чтобы выяснить это.

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

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

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

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

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

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

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

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

Продолжение статьи читайте во второй части…

За главную иллюстрацию благодарим catalyst

Сообщение Как создать привлекательный Landing page появились сначала на Веб студия HashWeb.

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

Что такое FoMO?

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

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

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

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

Best Buy имеет целый раздел на страницах своих продуктов, посвященный доступности в самом магазине и в онлайн варианте:

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

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

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

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

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

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

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

Сообщение Как использовать FoMO в веб-дизайне правильно? появились сначала на Веб студия HashWeb.

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

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

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

Что такое скелетный экран?

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

В чем уникальность?

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

• имитировать макет страницы проще с помощью такого экрана,
• содержимое загружается постепенно (не все сразу).

Скелетный экран также называют:

• призрачные элементы,
• заполнители контента,
• загрузчики контента.

Blockchain.com, YouTube, Facebook, Medium и другие крупные технологические компании используют подобное решение, в то время как их контент загружается для повышения UX.

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

Сообщение Что такое скелетный экран? появились сначала на Веб студия HashWeb.

Скачиваем и внедряем Anime.Js

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

В этом примере файл HTML выглядит следующим образом:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Anime.js Particles</title>
  <!--or use anime.min.js-->
  <script src="anime.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="anime-container">
</div>
<script src="script.js"></script>
</body>
</html>

Файл CSS styles.css определяет цвет фона для страницы и для отдельных частиц. Настройки позиционирования необходимы, чтобы мы могли позже свободно размещать частицы на странице, используя свойства CSS left и top.

body {
 background-color: hsl(30, 3%, 14%);
}
.anime-container {
  position: relative;
}
 
.anime-container .dot{
  position: absolute;
  /*draw particles as circles:*/
  border-radius: 50%;
  background-color: hsl(60, 100%, 80%);
}

Генерация «частиц»

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

Для следующего объяснения будет полезна официальная документация по anime.js.

В этом примере частицы расположены на архимедовой спирали. x и y положение частицы на экране (они же left и top в CSS) рассчитывается исходя из позиции angle по спирали:

x=a*angle*cos(angle)
y=a*angle*sin⁡(angle)

Количество углов и, следовательно, длина спирали определяется параметром l. С помощью параметра a вы можете контролировать плотность спирали.

var container = document.querySelector(".anime-container");
var n = 15;
var a = 20;
var l = 110;
for (var i = 0; i <= l; i += 1) {
  var angle = 0.1 * i;
  //shift the particles to the center of the window 
  //by adding half of the screen width and screen height
  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
  var dot = document.createElement("div");
  dot.classList.add("dot");
  container.appendChild(dot);
  var size = 5;
  dot.style.width = size + "px";
  dot.style.height = size + "px";
  dot.style.left = x + "px";
  dot.style.top = y + "px";
  dot.style.backgroundColor = "hsl(60, 100%, 80%)";
  }
}

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

anime.random(minValue, maxValue);

Размер частиц также изменяется случайным образом:

for (var i = 0; i <= l; i += 1) {
  var angle = 0.1 * i;
  //shift particles to the center of the window 
  //by adding half of the screen width and screen height
  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;
  var n = 15;
  
  //create n particles for each angle
  for (var j = 0; j < n; j++) {
    var dot = document.createElement("div");
    dot.classList.add("dot");
    container.appendChild(dot);
    var size = anime.random(5, 10); 
    dot.style.width = size + "px";
    dot.style.height = size + "px";
    dot.style.left = x + anime.random(-15, 15) + "px";
    dot.style.top = y + anime.random(-15, 15) + "px";
    dot.style.backgroundColor = "hsl(60, 100%, 80%)";
  }
}

Перед началом анимации все частицы должны быть невидимыми. Поэтому добавим:

dot.style.opacity = "0";

Основные настройки анимации

Основные настройки анимации сделаны следующим образом:

• Анимация должна повторяться непрерывно (loop: true),
• Ослабление является линейным (но можно попробовать различные значения),
• Целевыми элементами являются элементы с классом .dot

anime({
  loop: true,
  easing: "linear",
  targets: document.querySelectorAll(".dot"),
});

На следующем шаге будем анимировать различные свойства CSS. Основные шаги для CSS-анимации можно найти в документации anime.js.

Анимация непрозрачности

Вот как выглядит наша первая анимация, в которой все частицы медленно становятся видимыми в течение 50 мс:

anime({
  loop: true,
  easing: "linear",
  targets: document.querySelectorAll(".dot"),
  opacity: { value: 1, duration: 50}
});

И теперь мы наконец раскроем трюк, который создает спиральное движение частиц! Идея состоит в том, чтобы сделать частицы видимыми с определенной временной задержкой (например, с интервалом в 2 мс). Частицы в середине спирали сначала становятся видимыми, а затем все остальные частицы изнутри наружу. Функция пошагового изменения в anime.js идеально подходит для этого.

opacity: { value: 1, duration: 50, delay: anime.stagger(2) }

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

opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: 1200}
  ],

Анимация размера

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

width: { value: 2, duration: 500, delay: anime.stagger(2) },
height: { value: 2, duration: 500, delay: anime.stagger(2) },

Индивидуальное движение частиц

Типичная вещь в анимации частиц — это индивидуальное, непредсказуемое поведение частиц. Теперь наконец оживим частицы с индивидуальным движением в x и y направлении:

translateX: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  },

translateY: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  }

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

Кроме того, в этом случае необходимо рассчитать значения для translateX и translateY.

Вы можете увидеть окончательный результат:

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

opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: function(){return anime.random(500,1500);}}
],

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

Теперь вы познакомились с прекрасной библиотекой anime.js

Конечный вариант файла script.js:

var container = document.querySelector(".anime-container");

var a = 20;
var l = 110;

for (var i = 0; i <= l; i += 1) {
  var angle = 0.1 * i;
  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;
  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;

  var n = 15;
  
  for (var j = 0; j < n; j++) {
    var dot = document.createElement("div");
    dot.classList.add("dot");
    container.appendChild(dot);

    var size = anime.random(5, 10);
   
    dot.style.width = size + "px";
    dot.style.height = size + "px";
   
    dot.style.left = x + anime.random(-15, 15) + "px";
    dot.style.top = y + anime.random(-15, 15) + "px";
    
    dot.style.opacity = "0";
  
  }
}

anime({
  loop: true,
  easing: "linear",
  opacity: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: function(){return anime.random(500,1500);}}
  ],
  width: { value: 2, duration: 500, delay: anime.stagger(2) },
  height: { value: 2, duration: 500, delay: anime.stagger(2) },
  
  targets: document.querySelectorAll(".dot"),
 
  translateX: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  },
  translateY: {
    value: function() {
      return anime.random(-30, 30);
    },
    duration: 1500,
    delay: anime.stagger(2)
  }
});

Сообщение Создаем крутую анимацию «след частиц» на JavaScript появились сначала на Веб студия HashWeb.

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

Знакомимся с консолью разработчика

Давайте для примера возьмем нашу любимую поисковую систему Google (надеемся, они не обидятся). Запустим наш Chrome и в поисковике наберем фразу «консоль разработчика» просто для примера. Теперь запустим наш инструмент. Сделать это довольно просто:

• нажатием клавиши F12;
• нажатием сочетания клавиш Ctrl + Shift + I;
• через контекстное меню, вызванное нажатием правой кнопки мыши -> Просмотреть код;
• найдя в меню самого браузера пункт Дополнительные инструменты -> Инструменты разработчика.

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

Сама консоль разработчика состоит из 9 основных вкладок. Давайте начнем их рассматривать.

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

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

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

Давайте опробуем консоль разработчика в деле. Выберем один из пунктов поиска в google и попробуем изменить его цвет. Как мы видим, существует возможность изменить свойства как всего класса, так и отдельного элемента. При этом, если пролистать свойства вниз, то можно увидеть все, которые наследует элемент. Здесь же находится возможность посмотреть стили при использовании псевдоклассов (таких, как hover).

Консоль разработчика .Полезные функции вкладки Elements

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

Instagram не позволяет просто так скачивать фотографии со своего ресурса. Мы же все-таки попробуем это сделать. Открываем консоль разработчика, выбираем элемент с фотографией. Раскрываем элемент div, в который обернуто изображение…и находим несколько ссылок. Нас интересует последняя. Двойное нажатие на нее открывает возможность редактирования.

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

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

Сообщение Консоль разработчика – незаменимый инструмент веб-мастера (часть 1) появились сначала на Веб студия HashWeb.

Что такое рефакторинг?

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

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

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

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

Для чего проводится?

Рефакторинг в самом общем виде решает такие задачи и проблемы, как

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

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

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

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

Прекрасное изображение в начале статьи заимствовано у Al Power

Сообщение Рефакторинг. Что это? Для чего нужен? появились сначала на Веб студия HashWeb.

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

Slick slider

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

Swiper JS

Приобрел очень большую популярность в веб-разработке на Западе благодаря своей гибкости и простоте использования. Если решите посчитать все вариации Swiper для создания слайдера на сайт, то, наверное, собьетесь. Их действительно много. На официальном сайте библиотеки можно найти очень подробную документацию. Она на английском языке, но совершенно несложная. Визуальные примеры хоть и наглядные, но не обладают простотой восприятия. Кстати, хорошая новость для сторонников чистого JavaScript – библиотека работает без использования jQuery.

Fotorama

Следующий плагин для создания слайдера на сайт – Fotorama. Отличительной особенностью является довольно симпатичный дизайн уже из коробки без каких-либо доработок. Подходит для использования любого содержимого, но, как понятно из названия, очень хорошо смотрится при работе с фотографиями. Подключается к проекту также просто. Для работы использует jQuery.

Owl Carousel

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

Встроенная карусель Bootstrap

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

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

Сообщение Слайдер на сайт. Выбираем JS плагин появились сначала на Веб студия HashWeb.

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

Основным свойством CSS, с которым мы будем работать, является clip-path. Оно задает своеобразную область видимости фигур, за счет которой части элементов будут скрыты. При различных применениях clip-path можно добиться просто потрясающих эффектов, используя только HTML и CSS. Это действительно просто. Экспериментируйте, и результат превзойдет даже ваши самые смелые ожидания.

Сообщение Создаем крутой CSS эффект для информационной карточки появились сначала на Веб студия HashWeb.