Верстка. Часть 1: чистый html
Итак, нам необходимо сделать чат. Процесс создания элементов UI можно поделить на три этапа: дизайн, верстку и реализацию логики (фронтенд).
Дизайн — это проработка визуальной составляющей компонента. Результатом работы дизайнера является макет или изображение. В нашем случае, это представленная ниже картинка.
Верстка — это реализация дизайна с помощью, в нашем случае, html, css и различных наворотов к ним. На этом этапе не пишут логику, просто создают элементы, которые на форме/в браузере будут выглядеть аналогично дизайну. На этом этапе уже нужно учитывать поведение компонента: чат должен корректно отображаться как без сообщений, так и с сотней.
Логика, фронтенд — это добавление интерактива к верстке. Если на прошлом этапе мы должны были получить окно чата, как на картинке, то теперь мы должны заставить чат подгружать сообщения с сервера в реальном времени, отправлять сообщения пользователя на сервер, интерактивно реагировать на нажатия кнопок и так далее.
Верстка осуществляется с помощью связки html и css. Первый отвечает за структуру и организацию элементов, второй - за их визуальное представление.
И начнем мы с html.
Строим DOM
Для того, чтобы создать простой макет, нам понадобится всего несколько html-тегов:
- <div> — прямоугольная область
- <p> — строка-параграф
- <span> — часть строки
- <input> — область ввода данных
- <button> — кнопка
Эти тэги, вложенные один в другой, формируют DOM (Document Object Model), структуру нашего компонента.
Так же нужно помнить, что каждому элементу можно присвоить id, обеспечивающий возможность менять параметры конкретно этого элемента, и class, позволяющий менять параметры всех элементов этого класса. Это понадобится нам и в css, и в js, впоследствии.
Итак, наша задача — сверстать чат:
Для начала, выделим на нем все значимые группы элементов, при этом одинаковыми цветами будем помечать сходные по своей сути элементы.
Мы видим, что у нас есть общая область чата, в которой есть окно сообщений сверху и окно ввода данных снизу. В окне сообщений содержатся сообщения, каждое из которых - прямоугольник и текст в нем. В окне ввода находится элемент ввода и строка с ip-адресом.
Напишем это на html
В папке нашего проекта создадим .html документ. WebStorm автоматически сгенерирует базовые элементы веб-страницы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Работаем здесь -->
<!-- В html эти стрелочки отвечают за комментарии -->
</body>
</html>
В теге <head> располагаются данные о странице и импортируемые файлы, мы вернемся к нему позднее. В теге <body> находится контент страницы, в нем мы и будем работать.
Начнем добавлять элементы, сохраняя вложенность. С помощью классов помечаем, чем является тот или иной элемент. Сообщения помечаем как message и event в зависимости от того, текст это, или пользовательское событие.
И входящие, и исходящие сообщения/события выглядят и ведут себя, в целом, одинаково. Отличия только в конкретных деталях: в нашем случае, в том, слева сообщение, или справа. Поэтому к сообщениям и событиям добавим второй класс, показывающий, исходящие они (from) или входящие (to)
<div class="chat">
<!-- верхняя часть (сообщения) -->
<div class="message-zone">
<div class="event from">
<p class="text">#user1 join</p>
</div>
<div class="event from">
<p class="text">#user2 leave</p>
</div>
<div class="message to">
<p class="text">You hello hello hello hello hello hello hello </p>
</div>
<div class="message from">
<p class="text">#user3 hello there</p>
</div>
</div>
<!-- нижнаяя часть (ввод) -->
<div class="input-zone">
<input class="message"><button class="send">SEND</button>
<p class="ip">you joined as 127.0.0.1</p>
</div>
</div>
Также, на будущее, хорошей идей будет заключить в тег <span> все подстроки, которые должны будут выделяться, в нашем случае это будут имена пользователей в сообщениях:
<div class="chat">
<!-- верхняя часть (сообщения) -->
<div class="message-zone">
<div class="event from">
<p class="text"><span class="username">#user1</span> join</p>
</div>
<div class="event from">
<p class="text"><span class="username">#user2</span> leave</p>
</div>
<div class="message to">
<p class="text"><span class="username">You</span> hello hello hello hello hello hello hello </p>
</div>
<div class="message from">
<p class="text"><span class="username">#user3</span> hello there</p>
</div>
</div>
<!-- нижнаяя часть (ввод) -->
<div class="input-zone">
<input class="message"><button class="send">SEND</button>
<p class="ip">you joined as 127.0.0.1</p>
</div>
</div>
Если сейчас открыть эту страницу в браузере, мы увидим все содержимое нашего чата:
Это уже похоже на чат. Начало положено.