1. Теория, инструменты, регистрация аккаунтов

Приветствую вас на курсе «Сайт на Tilda».

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

Действительность оказалась суровее, но дело это меня затянуло, и вот уже 14 лет я в web-дизайне.

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

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

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

К тому времени сарафанное радио разнесло весть о том, что «Тимур программист и делать сайты умеет» и с этого момента началась моя карьера фрилансера.

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

Потом познакомился с Тильдой. Это не было любовью с первого взгляда. Да, она понравилась своей продуманностью, но я косился на неё с недоверием, как и на все другие конструкторы, пока не распробовал магию Zero Block. Это тот инструмент, который позволяет не погружаясь в техничку делать красивые сайты быстро.

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

Поэтому не слушайте никого, кто может сказать что-то типа «Фи, сайт на конструкторе». Сайт должен решать задачу. Точка. И плевать, на чём он сделан.

Так, я, кажется, немного увлёкся. Давайте переходить к делу.

Из чего сделаны сайты

Начнём мы с вами работу с небольшого экскурса в теоретическую часть.

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

1. HTML (HyperText Markup Language — «язык гипертекстовой разметки»). Это своего рода каркас сайта, его разметка. Чтобы не вдаваться в теорию слишком глубоко, я просто приведу пример исходного кода простейшей web-страницы.

<html>
    <head>
    <title>Привет, Мир!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>Привет, Мир!</h1>
        <p>Это моя первая web-страница</p>
    </body> 
</html>

HTML размечает страницу с помощью <тегов>. Тегов довольно много, поэтому мы не будем глубоко погружаться в изучение html. Если хотите изучить язык подробнее, рекомендую почитать htmlbook.ru. Эти знания пригодятся, если вы захотите выйти за рамки без того серьёзных возможностей Tilda.

Если вы скопируете код из примера в блокнот и сохраните файл с расширением .html, а потом откроете его, вы увидите:

2. CSS — Cascading Style Sheets (каскадные таблицы стилей). Как видно из названия, CSS отвечает за внешний вид страницы. Последние спецификации CSS позволяют делать в том числе анимацию.

Дополним наш пример выше.

<html>
    <head>
    <title>Привет, Мир!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    /*Добавляем стили*/
    <style>
        h1 {
            font-size: 50px;
            font-family: Arial, sans-serif;
            color: #333
        }
        p {
            font-size: 20px;
            font-family: Arial, sans-serif;
            color: #777
        }
    </style>
    /*Готово. Для примера этого достаточно :)*/
    
    </head>
    <body>
        <h1>Привет, Мир!</h1>
        <p>Это моя первая web-страница</p>
    </body> 
</html>

Добавив немного стилей, мы изменили шрифт, его размеры и цвет.

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

3. Java Script — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

Жутко звучит для неподготовленного человека, правда?

Если простыми словами, JS отвечает за функционал и за «спецэффекты», на которые не способен CSS.

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

На этой весёлой ноте предлагаю закончить с технологиями и отправиться дальше.

Для желающих познакомиться с «техничкой» подробнее, оставлю ссылки: изучить CSS можно на том же htmlbook, а по JS можете начать здесь.

Типы сайтов

Как мы выяснили выше, почти всё, что можно открыть в браузере — это сайт. Блог, социальная сеть, информационный портал, интернет-магазин, посадочная страница (она же landing page) — всё это сайты. И сделаны они с использованием всё тех же HTML, CSS, JS и других технологий.

Что мы можем сделать на Tilda?

Загибаем пальцы.

Одностраничник, он же «посадочная», он же landing page. В большинстве случаев так Тильду и используют — для быстрого создания промо-страницы.
Многостраничный сайт-визитку.
Интернет-магазин / каталог.
Сайт-портфолио.
Блог.

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

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

Инструменты

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

Adobe Photoshop для кадрирования и сжатия фотоконтента. В обработку и глубокую коррекцию мы не полезем, т. к. это тема отдельного эпоса, поэтому вы можете использовать более простой софт для этих целей, например XnConvert. Но я всё-таки рекомендую установить Photoshop. Пригодится.
Adobe Illustrator для работы с векторными изображениями. Вектор сейчас очень популярен, да и удобен. Векторные иллюстрации, вставленные на сайт в формате .svg занимают намного меньше места, чем обычные изображения, а также могут масштабироваться без потери качества. Поэтому Иллюстратор мы тоже будем использовать.
Adobe Experience Design (XD) для создания прототипа страницы. Сама программа «заточена» под дизайн приложений и интерфейсов, поэтому делать в ней прототипы намного удобнее, чем в Photoshop, хотя многие web-дизайнеры до сих пор используют именно его.

По браузерам решите сами в процессе. Я использую Safari и Firefox. У последнего, на мой взгляд, наиболее удобно реализованы инструменты для web-мастеров. Они нам пригодятся, так что рекомендую.

Регистрируемся

Всё установили? Если да, то пора. Идём на tilda.cc и регистрируем аккаунт.

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

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

Регистрация домена

Снова немного теории, без неё никуда.

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

А теперь по-русски. В нашем случае домен — это имя вашего сайта в адресной строке браузера.

Где регистрировать домен — не важно. Где хотите, где выгоднее, где удобнее. Я с 2011 года «дружу» с reg.ru. На их примере и буду показывать покупку и настройку. Принцип у всех регистраторов един, отличается лишь интерфейс.

Небольшое отступление о выборе домена

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

1. Длина домена. Имя не должно быть слишком длинным. Согласитесь, намного легче запомнить и воспроизвести smmagnat.ru, чем smmlimitedincorporated.ru.

Чем короче, тем лучше. Люди до сих пор передают адреса сайтов «из уст в уста», так что простое и короткое имя — это плюс.

2. Произносимость. Чем легче оно воспринимается на слух, тем легче запоминается.

3. Как слышится, так и пишется. Если название бренда произносится и пишется легко, а домен оказался свободным — это высший пилотаж. Вы родились под счастливой звездой. Поздравляю!

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

Использование дефисов «-» допустимо, тем более, что сейчас всё сложнее выбрать красивое имя для сайта, но по возможности старайтесь его избегать.

RU или COM?

.ru / .com / .net / .org и т. п. — это доменная зона первого уровня. Часто спрашивают, в какой доменной зоне регистрировать имя? На заре интернета у каждой доменной зоны было назначение. Например, зона .net использовалась организациями, занятыми сетевыми технологиями. А зона .org — некоммерческими организациями. Но всё смешалось в кучу. Вспомните тот же zaycev.net.

Сейчас не принципиально, какое будет у сайта окончание. Тем более после появления тематических доменных зон вроде .store, .online, .art и сотен других.

Другое дело, что в зоне RU домены, как правило, дешевле (в среднем от 99 ₽ в год), а в международных зонах .com и тематических — дороже. Иногда сильно. Самый дорогой домен, который я встречал стоил 12 000 000 ₽ на год.

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

Нашли тот, что вас устроил? Проверьте внизу количество доменов, которые заботливо собрал для вас reg.ru в процессе проверки имён, удалите лишние и жмите «Зарегистрировать».

ВНИМАНИЕ

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

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

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

Выбираем удобный способ оплаты, оплачиваем домен и переходим в личный кабинет.

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

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

Привязываем домен к Тильде

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

Перейдите в настройки сайта, раздел «Домен» и введите адрес, который только что зарегистрировали.

Возвращаемся на сайт регистратора, открываем управление DNS нашего нового домена и по инструкции Тильды прописываем две записи:

Запись типа A, которая бы указывала на IP адрес: 185.165.123.36 и запись типа А для поддомена WWW, которая бы указывала на IP адрес: 185.165.123.36.

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

Таким образом мы сообщаем системе доменных имён, что сайт, на который ссылается наш домен расположен по такому-то IP адресу.

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

На сегодня всё. Ждём, когда домен станет доступен, скачиваем и устанавливаем набор необходимых программ.