Месяц: Сентябрь 2021

Webpack– это статический модульный сборщик для приложений на JavaScript. Официальный сайт проекта:https://webpack.js.org/

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

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

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

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

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

Установка и настройка Webpack
Вебпак можно установить при помощи менеджера пакетов, например,npm.
npm install --save-dev webpack

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

1. Entry – вход
2. Output – вывод
3. Loaders – загрузчики
4. Plugins – плагины

Entry
Под Entry (вход) подразумевается точка входа (entry point), которую Вебпак будет использовать для построения внутреннего графа зависимостей. После ввода точки входа Вебпак сможет понять, какие модули и библиотеки напрямую и не напрямую связываются.

В результате каждая зависимость превращается в файлы, которые называются бандлами («bundles» можно перевести как пакеты или узлы).

Пример простейшей конфигурации entry:
webpack.config.js

module.exports = {entry: './path/to/my/entry/file.js'};

Output
Output (вывод) указывает на то, где вебпак должен размещать сборку созданных бандлов и как он будет называть эти файлы (по умолчанию это ./dist). Настроить эту часть процесса можно в поле output в конфигурации:

webpack.config.js

const path = require('path');
    module.exports = {
        entry: './path/to/my/entry/file.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js'
        }
    };

В этом примере output.filename отвечает за имя файла, а output.path – за директорию, в которой будет находиться сборка.

Loaders
Загрузчики (лоадеры) позволяют Вебпаку обрабатывать не только файлы JavaScript, т.к. сам по себе бандлер понимает только JS.

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

Использование загрузчиков имеет две цели:

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

Пример конфигурации:

const path = require('path');
   const config = {
      output: {
         filename: 'my-first-webpack.bundle.js'
      },
      module: {
         rules: [
            { test: /\.txt$/, use: 'raw-loader' }
         ]
      }
   };

module.exports = config;

Здесь определяются правила (rules) для конкретного модуля и используются свойства test и use. Компилятор Вебпака поймет, что когда он дойдет до файла «.txt» в require()/import, перед добавлением в бандл ему нужно будет использовать загрузчик raw-loader.

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

Для того чтобы использовать плагин, необходимо использовать require() и добавить его в массив плагинов. Большинство плагинов можно кастомизировать через настройки. Так как один плагин может использоваться несколько раз для разных целей, необходимо создать несколько отдельных экземпляров, использовав оператор new.

Много плагинов поставляются сразу с Webpack из коробки.

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

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

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

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

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

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

Для наглядности можно рассмотреть такой пример:

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

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

Так, механизм Google Пингвин обязательно отреагирует на следующие:

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

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

Что такое анкор в SEO и в чем заключается его значимость
Якорь является индикатором, используемым поисковиками с целью определения релевантности. Так, к примеру, у Гугл имеется специальный патент индексации тегов-анкоров в системе.

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

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

Поэтапно это выглядит следующим образом:

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

Анкор в СЕО — это инструмент продвижения. Но для достижения желаемых результатов анкор-ссылки для SEO должны быть максимально естественными. Это требование поисковых систем (ПС), на которое необходимо ориентироваться интернет-пользователям. Считается, что естественность обеспечивают только безанкорные указатели, которые чаще всего прописывают юзеры, общаясь между собой на форумах, в социальных сетях и комментариях.

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

Разновидности анкоров
Типирование подразумевает деление анкорного текста на девять видов. Ниже коротко представим каждую разновидность.

Анкоры-бренды
Это текстовая составляющая, в которой задействовано наименование организации или веб-ресурса. Например, «Отслеживайте позиции продвигаемого проекта в поисковиках с помощью интернет-сервиса Serpstat» или «Воспользуйтесь услугами школы подготовки SEO-специалистов Soltyk».

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

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

Голые указатели
Разбираясь на примерах, как добавить анкор к ссылке, можно выяснить, что к данной категории относятся любые якорные элементы, содержащие открытый URL. Как образец можно представить: www.nestle.com.

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

Без ключевиков
Наглядно это смотрится так:

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

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

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

• обновления рубрики от Skillbox;
• выгодное предложение от SEOskill;
• Setters — успешное продвижение проектов в соцсетях.

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

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

Точное соответствие
Представляет собой полное совпадение с целевым вариантом ключа и веб-страницы. Так, сочетание «приобрести обратные web-ссылки» — ключ-предназначение, он же выступает в роли анкора.

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

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

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

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

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

Однако наиболее распространенным (максимально универсальным) способом формирования анкор-листа является сочетание:

• 20% — доля анкор-ссылок;
• 80% — часть безанкорных.

Например, Serpstat советует по возможности выдерживать следующие параметры, представленные в графике-диаграмме:

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

Что лучше использовать для формирования ссылок

При составлении необходимо учитывать три основных нюанса:
• Релевантность. Анкор-ссылка и расположенный вокруг нее текст обязаны соответствовать друг другу, а также иметь направленное пересечение с тематикой площадки, на которую делается отсылка.
• Акцент на предельную естественность. Когда якорный элемент звучит неестественно, поисковая система воспринимает это как тревожный сигнал. Механизмы поисковиков устроены таким образом, что дают им возможность адекватно оценивать морфологию словообразования. И если текстовое содержимое построено неестественно, они незамедлительно реагируют. Так, словосочетание «куртки детские цена» по правилам русского языка звучит совершенно неправильно.
• Соотношение в процентах. Распределять якоря разных видов нужно грамотно, чтобы соблюсти баланс и не навлечь на себя недовольство ПС. Как уже было отмечено выше, конкретной единой для всех формулы не существует. Остается опираться на рекомендованные значения.

Применения каких анкоров следует избегать
Теперь стоит перечислить разновидности, от применения которых лучше отказаться:

• С точным вхождением в ущерб естественности. Хотя к ней требуется стремиться в первую очередь, выясняя, как поставить анкорную ссылку. Многие интернет-пользователи допускают такую ошибку. Стараются всеми силами добиться максимального соответствия якоря запросу. Поэтому на просторах всемирной сети нередко встречаются подобные перлы: «купить шапка дешево Тольятти», «электрик Самара вызов недорого». А ведь составлять текст нужно на простом «человеческом» языке, который будет понят и юзерам, и поисковикам.
• С выраженной коммерческой направленностью. Многие слова в неизменной форме люди используют крайне редко. К примеру: «заказать», «цена». Когда пользователь на своей странице делает обзор продукта, он обычно пишет:


А не:


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



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

Moodle (расшифровывается как Modular Object-Oriented Dynamic Learning Environment) — бесплатная система электронного обучения. Это открытое веб-приложение, на базе которого можно создать специализированную платформу для развития студентов или сотрудников.

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

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

На сегодня Moodle — одна из самых популярных платформ электронного обучения. Она переведена более чем на 100 языков, и ею пользуются крупные университеты во всем мире.

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

• Нельзя выдавать сертификаты;
• Нельзя менять дизайн;
• Поддерживаются плагины только с сайта Moodle;
• Если системой не пользоваться в течение 60 дней — ее автоматически удалят.

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

Система Moodle — прежде всего серверное решение. Чтобы установить Moodle, нужно:

• Скачать установщик с официального сайта. Это бесплатно. Поддерживается Windows и Mac OS;
• Распаковать и запустить Start Moodle.exe;
• Открыть панель администратора Moodle в браузере через http://localhost/ или адрес вашего сайта;
• Заполнить форму: имя платформы, пароль и форму. Затем система сделает необходимые проверки;
• Подождать, пока система установится.

Можно приступать к настройке системы. Ниже расскажем, как это сделать.

Организация электронного обучения
У Moodle непростая организация обучения. Для вашего удобства мы поделили этот раздел на три части: создание, поддержка и организация курсов.

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

Вот так выглядит вопрос теста, созданного в редакторе Moodle:

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

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

Неопытный пользователь может потратить на создание одной лекции день. Сократить время работы и упрастить задачу можно при помощи конструктора электронных курсов (Authoring Tool). С его помощью вы за час упакуете текст, видео, картинки и музыку в электронный курс. Например, iSpring Suite — комплексный набор, позволяющий создавать полноценные уроки: презентации, тесты, диалоговые тренажеры и скринкасты. Это может быть урок по пожарной безопасности или тренажер по продажам в салоне.

Поддержка контента
В хранилище Moodle можно загрузить файлы в следующих форматах:

• Текст — doc, pdf, xls, csv
• Изображения — jpeg, png, gif
• Видео — flv, f4v, f4p, mp4, m4v, m4a, 3gp, mov
• Аудио — mp3, aac, flac, m4a, oga, ogg, wav

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

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

SCORM 1.2 — самый новый из таких стандартов, но Moodle поддерживает и более старые. Полный список:

• SCORM 2004, 1.2
• IMS
• LTI 1.1, 1.3, 2.0
• AICC
• xAPI и cmi5. Поддерживаются через плагин Logstore API

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

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

Итог:

• Курсы состоят из тем
• Темы состоят из готовых единиц контента: лекция, тест, SCORM-пакет
• Контент создается во внутреннем редакторе или загружается на платформу

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

1. Встроенный редактор. Элемент «Тест» позволяет создавать простые тестирования с 15 видами вопросов. Например, множественный выбор, короткий ответ, эссе, соответствие, перетаскивание. Так выглядит тест, сделанный в Moodle:



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

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

Базовые возможности расширяются за счет 38 плагинов по формированию статистики. Вот некоторые из них:

• My Feedback формирует подробные отчеты по успеваемости в табличной форме



• Overview Statistics выгружает разные виды отчетов в виде графиков



• Device Analytics предоставляет информацию по устройствам, с которых пользователи заходят в Moodle



• Monitoring Learning Plans предоставляет шаблоны учебных планов и позволяет выгружать по ним статистику



• Events Graphic Reports создает отчеты в виде графиков по событиям в Moodle

Таким образом с помощью плагинов можно настроить специализированную систему аналитики.

Мобильное обучение
Moodle поддерживает мобильные браузеры Chrome и Safari. В них можно как проходить курсы, так и администрировать платформу.

У Moodle есть мобильное приложение Moodle Mobile. В нем можно выполнять задания, общаться с другими пользователями и создавать Wiki-статьи. Мобильная версия также позволяет скачивать задания для прохождения в офлайн-режиме.

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

Самый простой способ — установка плагина PayPal. Он позволит запрашивать плату через PayPal за доступ к контенту на платформе.

Второй способ — продавать курсы через WordPress. Сервис интегрируется через плагин Edwiser Bridge. Вы переносите курсы на сайт с WordPress и с помощью надстройки WooCommerce продаете их.