Широкое использование Интернета заложило основу для развития такого направления как Интернет-маркетинг. Интернет-маркетинг является разновидностью маркетинга, к которой обращаются большинство компаний. Главная цель Интернет-маркетинг заключается в продвижении товаров и услуг в сети Интернет [1].
Целевые страницы используются в Интернет-маркетинге для привлечения посетителей, предоставляя им максимум полезной информации о предлагаемом товаре или услуге и побуждая их совершить действие. Действие может включать в себя: подписку, звонок, покупку товара [1].
Для того, чтобы создать конструктор формирования landing page, необходимо установить все необходимые инструменты. Для создания приложения будет использоваться Node.js – платформа для реализации серверной части. С сайта разработчика скачиваем стабильную версию и устанавливаем (рис. 1) [2].
Рисунок 1 – Загрузка Node.js
После установки необходимо проверить правильность установки. Наберем команду node –v в командной строке Node.js, которая устанавливается по умолчанию и найти её можно в установленных приложениях.
JavaScript на основе Node.js не заменит полностью php, например, php-файл отвечающий за сохранение страницы. Поэтому, для работы с php-файлами, необходимо установить на компьютер веб-сервер Apache и PHP. Для того, чтобы не устанавливать все компоненты отдельно, установим Denwer. С сайта разработчика скачиваем Denwer (рис. 2) [3]. Устанавливаем Denwer в ранее созданную папку WebServer.
Рисунок 2 – Загрузка Denwer
Для редактирования программного кода понадобится текстовый редактор Notepad++. С сайта разработчика скачиваем инсталлятор Notepad++ для 64-битной системы (рис. 3) [4].
Рисунок 3 – Загрузка Notepad++
Необходимо создать основную папку echo, в которой будут находиться следующие файлы: save.php, .htaccess, redactor.html, папка test, папка fonts, папка css (рис. 4).
Рисунок 4 – Структура папки echo
Файл save.php описывает процесс сохранения пользователем целевой страницы (листинг 1).
<?
$file=$_POST['html'];
if ($_GET['params']==’saveHTML’){
$html=
’<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”test.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>’
.
$file
.
’</body>
</html>’;
$name=’test/test’.time().’.html’;
if(!file_put_contents($name,$html)){
echo “Error”;
exit();
}else{
echo $name;
exit();
}
}
?>
Файл .htaccess состоит всего двух строк (листинг 2). Первая строка отвечает за кодировку, в которой по умолчанию будут передаваться сервером файлы. Может возникнуть ситуация, когда сервер будет отображать список всех файлов, которые будут находится в директории. Чтобы запретить данное действие, необходимо создать в директории файл с расширением .htaccess и добавите в него строку Options All –Indexes [5].
Листинг 2. .htaccess
AddDefaultCharset utf-8
Options All –Indexes
Папка test состоит из css файла под названием test и папки папка fonts. В данной папке на сервере будут сохраняться все созданные пользователем целевые страницы. Файл test.css задает стиль сохранения страницы. В папке fonts заданы шрифты в различных форматах: eot, ttf, svg, woff. Так как в сети Интернет используют четыре формата шрифтов, то и конструктор должен поддерживать все форматы [5].
Несмотря на то, что существуют несколько форматов, нет единого, который бы работал во всех браузерах. Например, Internet Explorer поддерживает только eot и частично ttf. Формат svg не поддерживается в Internet Explorer и Firefox, а так же перестает использоваться в Google Chrome. Форматы svg и woff применяется для большинства браузеров. Итак, так как нет единого формата шрифтов для всех браузеров, то мы используем все четыре формата, чтобы созданная целевая страница выглядела одинаково у всех пользователей web-приложения.
В файле redactor.html прописаны все необходимые элементы конструктора, такие как: смещение, фон, заголовок, текст, картинка, блок наполнения, линия, кнопка, форма обратной связи, область редактирования.
Например, в листинге 3 показано создание кнопок смещения и фона. Действия при нажатии на кнопки прописаны в отдельных файлах формата js [6]. Ссылки на файлы формата js находятся в файле redactor.html.
Листинг 3. Создание кнопки смещения
<div class=”header-bar clearfix”>
<div class=”forn-group”>
<label for=”hb-input1″>Смещение</label>
<input type=”number” id=”hb-input1″ class=”form-control widthMail” value=”4610 px”>
</div>
…
</div>
В листинге 4 показано создание виджета «Заголовок» для конструктора формирования landing page. Для хранения значения создаем собственный атрибут, который обязан начинаться с data-* и назовем data-blocks. Далее используется масштабируемая векторная графика (SVG). Указывается версия, ссылки, координаты. Атрибут viewBox принимает следующие значения: горизонтальная координата, вертикальная координата, ширина и высота [6, 7]. Это параметры прямоугольной области в пикселах относительно которой устанавливаются размеры всех элементов SVG-документа. С помощью тега <path> задаем траекторию. Все данные картинки можно получить с помощью Adobe Illustrator, при сохранении картинки в svg формате.
Листинг 4. Создание виджета «Заголовок»
<li class=”active” data-blocks=”title”>
<a href=”#”>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink” <!– для подключения внешних и внутренних ссылок–>
x=”0px” y=”0px” <!– горизонтальная и вертикальная координаты–>
viewBox=”0 0 27.8 24″
style=”enable-background:new 0 0 27.8 24;”
xml:space=”preserve”>
<path d=”M25,1.1C25,0.5,24.5,0,23.9,0H4.1C3.5,0,3,0.5,3,1.1v21.8C3,23.5,3.5,24,4.1, 24h19.8c0.6,0,1.1-0.5,1.1-1.1V1.1z M23,22H5V2h18V22z”/>
<rect x=”8″ y=”4″ width=”12″ height=”1″/> <!– прямоугольник с координатами, шириной и высотой–>
<rect x=”8″ y=”6″ width=”12″ height=”1″/>
<rect x=”8″ y=”17″ width=”12″ height=”1″/>
<rect x=”8″ y=”19″ width=”12″ height=”1″/>
<path d=”M8,9v6h12V9H8z”/>
</svg>
<!– <img src=”css/img/navbar-title-icon.svg” alt=”"> –>Заголовок
</a>
</li>
Все остальные элементы конструктора формирования landing page строятся по аналогии.
Подключение прелоадера и стилей прописывается в head файла redactor.html. В папку fonts поместили восемь шрифтов: NeoSansPro-Bold, NeoSansPro-BoldItalic, NeoSansPro-Italic, NeoSansPro-Light, NeoSansPro-LightItalic, NeoSansPro-Medium, NeoSansPro-Regular и NeoSansPro-Ultra в формате otf.
На рисунке 5 показана структура папки css. В папке fonts заданы шрифты в различных форматах: eot, ttf, svg, woff. Папка img содержит иконки для панели инструментов, а так же для прелоадера в формате gif.
Рисунок 5 – Структура папки css
Все остальные файлы задают внешний вид, создаваемого, конструктора формирования landing page.
Для того, чтобы элементы конструктора реагировали на действия пользователя, необходимо прописать на JavaScript. Для этого создается папка под названием javascript.
На рисунке 6 показаны, созданные в папке javascript, файлы. В результате получилась следующая структура расположения файлов конструктора, представленная на рисунке 7.
Рисунок 6 – Структура папки javascript
Рисунок 7 – Общая структура расположение всех файлов
Например, в файле blocks.js описаны поведение для вех элементов конструктора при перенесении элемента на область редактирования. В листинге 6, показан как задается функция переноса виджета «Картинка».
Листинг 6. Функция переноса виджета «Картинка»
…
‘block-image’: {
html: (function(){
var
html=’
<td class=”‘+classAllMail+’ typeBlockImage” type=”block-image” start>
<js parent-class=”block-image”></js>
’+topPanel+’
<div class=”thisContent”>
<div class=”thisImage”>
<img src=”css/img/avatar.png” this>
</div>
</div>
’+funcPanel+’
</td>’;
return html;
})()
},
…
Для того, чтобы выбранный виджет можно было редактировать через контекстное меню, создается файл additMenu.js. В данном файле прописываются все необходимые инструменты редактирования (например, удаление, скругление, цвет) и их функции. В листинге 7 приведен фрагмент контекстного меню виджета «Картинка» [8]. Весь код файла additMenu.js смотрите в приложении.
Листинг 7. Контекстное меню виджета «Картинка»
…
html+=’
<div class=”additionalMenu”>
<div class=”trMenu itemMenu” func=”delete”>Удалить</div>’;
switch(type) {
case ‘block-image’:
html+=’
<label>
<div class=”trMenu itemMenu”>Изменить изображение</div>
<input type=”file” class=”updateImage”>
</label>
<div class=”menu”>
<div class=”trMenu infoMenu”>Скругление</div>
<div class=”dropdown”>
<div class=”parentRange”>
<input type=”range” class=”inputRange itemMenu” func=”border_radius”>
</div>
</div>
</div>’;
break;
…
В папке minicolors находятся все необходимые файлы, для создания и вызова палитры цветов.
В папке nicEdit находятся все необходимые файлы, для создания и вызова текстового редактора. В листинге 8 показан фрагмент создание кнопок текстового редактора [8]. Весь код файла nicEdit.js смотрите в приложении.
Листинг 8. Кнопки текстового редактора
…
var nicEditorConfig = bkClass.extend({
buttons : {
’bold’ : {name : __(‘Click to Bold’), command : ‘Bold’, tags : ['B','STRONG'], css : {‘font-weight’ : ‘bold’}, key : ‘b’},
’italic’ : {name : __(‘Click to Italic’), command : ‘Italic’, tags : ['EM','I'], css : {‘font-style’ : ‘italic’}, key : ‘i’},
’underline’ : {name : __(‘Click to Underline’), command : ‘Underline’, tags : ['U'], css : {‘text-decoration’ : ‘underline’}, key : ‘u’},
’left’ : {name : __(‘Left Align’), command : ‘justifyleft’, noActive : true},
’center’ : {name : __(‘Center Align’), command : ‘justifycenter’, noActive : true},
…
В результате был создан онлайн-конструктор формирования landing page, который представлен на рисунке 8.
Рисунок 8 – Конструктор формирования landing page
Конструктор обладает минимальным набором функций, которые необходимы для разработки целевой страницы.
Библиографический список
- Хлебород С.А. Понятие целевой страницы и ее особенности // X Международная студенческая электронная научная конференция «Студенческий научный форум 2018».
- Официальный сайт Node.js [Электронный ресурс]. – URL: https://nodejs.org. (Дата обращения: 20.09.2017).
- Официальный сайт Denwer [Электронный ресурс]. – URL: http://www.denwer.ru. (Дата обращения: 20.12.2017).
- Официальный сайт Notepad++ [Электронный ресурс]. – URL: https://notepad-plus-plus.org. (Дата обращения: 19.09.2017).
- Официальная страница Web Fundamentals. Оптимизация шрифтов [Электронный ресурс]. – URL: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ru. (Дата обращения: 15.12.2017).
- Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. – 4-е изд., перераб. и доп. – СПб.: БХВ-Петербург, 2015. –768 с.: ил.
- Дунаев В.В. HTML, скрипты и стили. – 4-е изд., перераб. и доп. – СПб.: БХВ-Петербург, 2015. – 816 с.: ил.
- Официальный сайт GitHb [Электронный ресурс]. – URL: https://github.com. (Дата обращения: 20.12.2017).
Количество просмотров публикации: Please wait