Как создать посадочную страницу без кодерских полномочий

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

Зачем нужен образ мышления «взлома»?

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

Если возникнет препятствие (или возможность), и вы будете готовы в него вникнуть, все возможно. Когда вы это сделаете, вы обнаружите, что основной рабочий процесс зачастую одинаков. Сначала вы четко определяете, что вы хотите сделать. Затем вы ищете существующий код и учебники, которые помогут вам собрать функциональное решение. Думайте об этом как о методологии Lean Startup в применении к обучению — вместо того, чтобы вкладывать деньги в обучение программированию, изучите только минимальные навыки, необходимые для улучшения или создания вашего целевого продукта. Сделайте это сегодня, изучите больше в следующем месяце, еще больше в следующем месяце, и вскоре вы сами удивитесь тому, как много можно сделать с помощью фигурных скобок. Этот пост поможет вам начать этот путь, поставив перед вами задачу — создать маркетинговую страницу для нового продукта — дав вам советы на этом пути и указав на ресурсы, где вы можете узнать больше.

Прежде чем начать

В следующих разделах я расскажу вам о создании собственной целевой страницы для поддельного продукта. Вы можете сразу перейти к этому, а можете начать с практики HTML и CSS. Если вы еще не сделали этого, уделите несколько дней и пройдите курс по HTML и CSS в Codecademy. Это один из самых быстрых способов получить базовое понимание этих двух языков. Для получения бонусных очков продолжите изучение курсов по JavaScript и JQuery, чтобы получить представление и о них. Ограничение Codecademy, однако, заключается в том, что они не позволяют легко перенести свои знания из их среды в собственный проект. Вот тут-то и приходит время «взлома». Если вы хотите получить больше практики в HTML и CSS, вы можете обратиться к JSFiddle, чтобы попробовать создать базовые страницы. С его помощью вы можете изучить, как различные элементы влияют на макет страницы, и поиграть с созданием базовых макетов. Если вам нужен очень простой пример, попробуйте начальный макет. Вы также можете добавить свой собственный JavaScript.

Задача: Создать посадочную страницу

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

Масштаб проекта

Давайте определимся, что мы создаем. Если хотите, используйте этот учебник для разработки целевой страницы для собственного продукта или бизнеса, но если у вас нет подходящего варианта, давайте выберем воображаемый продукт и будем работать с ним. Во втором сезоне сериала «Кремниевая долина» один из героев работает над приложением под названием «Bro», которое по сути является клоном «Yo», позволяющим отправлять сообщение «Bro» своим друзьям. Просто для развлечения давайте создадим начальную целевую страницу для этого приложения.

Найти код

Теперь, когда мы знаем, что мы создаем, нам нужно найти готовый код. SOMA, компания по производству фильтров для воды, провела успешную кампанию на Kickstarter, в которой они использовали простую целевую страницу, чтобы побудить людей поделиться их кампанией, чтобы помочь им получить финансирование. После этого они разместили код этой целевой страницы в Интернете, чтобы любой желающий мог скачать его и использовать — все HTML, CSS и JavaScript, необходимые для запуска веб-страницы, в одной папке. Нажмите «Загрузить ZIP» и после загрузки распакуйте его, откройте папку «share», а затем откройте четыре файла с помощью текстового редактора, ориентированного на веб-программирование. Если у вас нет текстового редактора для программирования, скачайте Brackets для Mac или Coffee Cup Free HTML Editor для Windows. Преимущество обоих этих редакторов в том, что они позволяют вам видеть «живой предварительный просмотр» сайта в процессе его создания. После того, как вы открыли код в редакторе, включите предварительный просмотр. Вы увидите базовую реферальную страницу SOMA, которую они использовали, но когда мы закончим с ней, мы адаптируем ее для приложения «Bro» или для вашего собственного продукта.

Редактирование HTML

Если вы откроете файл «index.html» в текстовом редакторе, вы увидите HTML, который SOMA использует на своей целевой странице. Вы увидите ряд наиболее распространенных элементов HTML:

Начальная метка	Конечный тег	Содержание элемента
<h1>	<h1>	Теги заголовков, которые варьируются от h1 (самый большой) до h6 (самый маленький), сообщают странице, что что-то является элементом заголовка.
<p>	</p>	Теги абзаца указывают браузеру, что текст является абзацем или общим основным текстом
<a>	</a>	Теги гиперссылок создают новую ссылку в тексте, используя формат <a href=»http://www.yoururlhere.com/»>ваш текст с гиперссылкой</a>`.
<b>	</b>	Полужирные теги полужирный текст между ними
<i>	</i>	Теги курсива выделяют текст между ними курсивом
<br />		Тег перевода строки, которому не нужен тег начала и конца, вставляет разрыв строки

Чтобы начать Bro-фикацию страницы, измените текст <h1> на Support Bro with Three Clicks! и <title> страницы, который определяет, что отображается на вкладке в верхней части браузера, на Bro - Share.

Еще ниже вы увидите основной текст страницы в теге <p>, который гласит <p id="welcome">. Не беспокойтесь о том, что такое id, так как мы объясним это в ближайшее время. Внутри этого тега <p> находится весь основной текст веб-страницы. Вы можете установить его как угодно, но для Bro вставьте следующее:

<b>Hola, rockstar!</b> <br /> <br /> Мы надеемся, что у вас сегодня замечательный день. Вы здесь, потому что мы знаем, что вы имеете влияние. Когда вы делитесь чем-то, люди обращают внимание. Поэтому, пожалуйста, уделите несколько секунд, чтобы рассказать брату о Бро. <br /> <br /> <b>Большое спасибо,</b> <br /> Nat

Ниже этого текста вы увидите HTML-теги <ul> и <li>, которые создают три отдельных раздела совместного доступа в виде «неупорядоченного списка». Если вы хотите изменить текст любой из кнопок совместного доступа, просто отредактируйте текст <p> в разделах <li>.

Например, мы можем изменить «Поделись Сомой со своими друзьями» на «Поделись Бро со своими друзьями». А «Заранее спасибо за поддержку Soma» на «Заранее спасибо за поддержку Bro». Не стесняйтесь менять в структуре все, что захотите, и постоянно обновляйте «живой предварительный просмотр», чтобы видеть, как ваши изменения влияют на сайт. Не обязательно использовать именно ту структуру, которую они использовали, вы можете даже добавить новые блоки, или видео, или что-нибудь еще.

Редактирование CSS

Если HTML — это скелет страницы, то CSS — это ее кожа и одежда; он располагается поверх HTML и придает сайту красивый вид. CSS расшифровывается как «Каскадные таблицы стилей» и представляет собой текстовый файл, такой же, как HTML, но написанный специально для изменения HTML-документа. После того, как вы поработали с HTML страницы SOMA, переключитесь на файл «share.css», чтобы начать редактировать CSS. Документы CSS не структурированы по порядку, как документы HTML или JavaScript. Думайте о документе CSS как о коллекции правил. Первая строка (обычно это p, .welcome или #header) сообщает браузеру, какой части HTML следует придать стиль, и называется «селектором» для этой строки.

Если селектор начинается с ., то это «класс», определенный в HTML, а если с #, то это «id», определенный в HTML. Помните, выше вы видели <p id="welcome">? Так вот, это означает, что если вы добавите строку для #welcome {``} в документ CSS, она будет влиять только на этот элемент параграфа. Затем все, что находится внутри фигурных скобок { }, определяет правила для этого элемента, такие как цвет текста, количество пробелов между строками и многое другое.

Помните, что если вы не уверены в том, что делает тот или иной элемент, вы можете найти его на W3Schools (популярный справочный сайт по веб-программированию) или просто попробовать изменить его и посмотреть, что получится. В этом и заключается половина удовольствия от процесса взлома — вносить небольшие изменения и учиться путем экспериментов. Для этой страницы направления SOMA есть ряд элементов страницы, которые вы можете попробовать изменить. Например, вы можете:

• Измените цвет полосы за заголовком в разделе «h1» на синий
• Измените цвет текста заголовка также в разделе «h1» на «FFFFCC", что сделает его кремовым.
• Измените цвет любого другого текста в разделах «body», «h2», «welcome» и «button» на любой другой, попробуйте DarkGray.
• Сделайте индикатор прогресса другого цвета в разделах «#progress», например DeepSkyBlue

Вы даже можете добавить свои собственные элементы в HTML, а затем попробовать придать им пользовательский стиль в CSS!

Играйте с JavaScript

Третья часть загруженного вами кода SOMA — это файл «share.js», содержащий JavaScript, который необходим странице для работы кнопок. JavaScript (JS, сокращенно) — это язык веб-программирования, который позволяет добавлять дополнительные функции к любой части веб-страницы на основе пользовательского ввода, будь то перемещение элементов, изменение CSS различных элементов или, в данном случае, увеличение индикатора выполнения. Три части кода, начинающиеся с $('.(something)').on('click', function() { определяют правила для каждой из кнопок: кнопки Facebook, кнопки Twitter и кнопки Play. Они указывают странице, куда отправлять вас при нажатии на них, а также указывают странице увеличивать индикатор выполнения при нажатии на одну из них. В каждом из этих блоков кода вы можете найти URL, на который кнопка отправляет людей. Все, что вам нужно сделать, чтобы заставить этот JS-код работать на вас, — это заменить эти URL на ваши собственные URL, и все готово! Вы также захотите изменить «Заголовок» в разделе кнопки Twitter, поскольку он определяет, какой текст будет отправлен в Твиттер вместе с URL. После того как вы измените JS, HTML и CSS, вы создадите свою собственную реферальную страницу без каких-либо серьезных знаний HTML или CSS. Нет необходимости тратить недели на изучение тонкостей языка, вместо этого такие проекты, как этот, помогут вам быстро продвинуться вперед.

3 трюка, чтобы не застрять

Не волнуйтесь, если вы столкнулись с незнакомым элементом HTML или CSS, это обязательно произойдет. Просто введите этот элемент в Google, и вы обычно попадаете на соответствующую страницу W3Schools, где объясняется, что делает этот элемент и какие атрибуты можно передать ему. В то же время вы можете задать в Google вопрос типа «Как выровнять картинку по центру с помощью CSS?», и на Stack Overflow (самый популярный сайт вопросов и ответов по программированию) найдется соответствующий ответ, объясняющий, как это сделать. Используя эти два ресурса, вы сможете разобраться практически в любом HTML или CSS, который вам нужно знать. Другой вариант — зайти на чужой сайт и выяснить, как они что-то сделали, используя «инспектор страниц». Если вы используете Chrome, Firefox, Safari или Internet Explorer, то у вас есть возможность просмотреть HTML и CSS любой веб-страницы, на которой вы находитесь. В Chrome и Firefox вы можете щелкнуть правой кнопкой мыши и выбрать «Inspect Element». В Safari вам нужно включить эту функцию в настройках. В Internet Explorer необходимо добавить панель инструментов разработчика. Какой бы браузер вы ни использовали, он откроет весь HTML и другой код, определяющий внешний вид страницы, а также интерактивные элементы (так называемый «фронтенд») веб-страницы, чтобы вы могли пролистать ее и посмотреть, как она устроена.

Еще одна интересная вещь — возможность изменять внешний вид веб-страницы (правда, только для вашего личного браузера). Например, вы можете зайти на сайт CNN, щелкнуть правой кнопкой мыши на заголовке, нажать «проверить элемент», а затем изменить HTML этого текста на что-то нелепое. Или вы можете сделать его другого цвета.

Взлом других вещей

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