Верстка. Часть 1: чистый html

by @frntndttrl
Верстка. Часть 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>

Если сейчас открыть эту страницу в браузере, мы увидим все содержимое нашего чата:

Это уже похоже на чат. Начало положено.

Весь код — в этом коммите

November 3, 2018
by @daihaminkey