Заметки о дизайне, 3d, ui/ux и прочей цифровой всячине

Скелет таблицы

Таблица в HTML состоит из следующих тегов: <table>, <caption>, <tr>, <td> или <th>.

<table> — главный тег таблицы, который включает остальные теги
<caption> — название/заголовок таблицы
<tr> — строка таблицы (table row)
<th> — ячейка-заголовок (table header)
<td> — ячейка таблицы (table data)


Пример таблицы с оформлением:

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

2019   учусь

Виды списков в HTML

Пока знаю два вида списков: маркированный и нумерованный.


Неупорядоченный список (маркированный):

<ul>
    <li>Раз</li>
    <li>Два</li>
    <li>Три</li>
</ul>


Упорядоченный (нумерованный) список:

<ol>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
</ol>


2019   учусь

Наполнение тега <head>

Дефолтный доктайп выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Кодировка HTML-страницы</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>


Если разобрать наполнение тега <head>:

<meta charset="utf-8"> — задаёт кодировку
<title>Кодировка HTML-страницы</title> — задаёт название, которе будет отображаться во вкладке веб-браузера
<link rel="stylesheet" href="style.css"> — подключает внешний css-файл cо стилями


2019   учусь

Стили


Это пример самого простого применения стиля:

<p style="color: red;">…</p>

Такой стиль называется «инлайновый» или «встроенный стиль».


Ещё стили можно завернуть в тег <style> и они будут существовать в одном HTML-документе с основной разметкой. Но такими стилями много не «наоформляеш».


Поэтому следует выделять все стили в отдельный CSS-файл и подключать в шапке через тег <link>:

<link rel="stylesheet" href="style.css">


2019   учусь

Наименование сущностей в CSS

Полезно знать терминологию, чтобы не тыкать пальцем в «вот эту штуковину».


Вот пример кода CSS:

body {
  padding: 0 20px;

  font-size: 16px;
  font-family: "Arial", sans-serif;
}


Вот как называются сущности в иерархии:

селектор {
  свойство1: значение1;
  свойство2: значение2;
}


А у тегов, в свою очередь, есть атрибуты:

<img class="avatar" src="keks.png">
<имя-тега атрибут1="значение1" атрибут2="значение2" …>


2019   учусь

Основа вёрстки: HTML, CSS


Нашёл для себя новую игрушку. Начинаю вникать в веб-вёрстку. Начал с базовых технологий HTML и CSS. Для затравки сверстал тривиальные сущности: текстовое поле и кнопку. Настроил их внешний вид и добавил интерактивности. Для демонстрации примера использовал удобный сервис JSFiddle. В нём есть подсветка синтаксиса, автодополнение и автовыполнение кода. Попробовал использовать CSS-переменные и понял зачем нужны препроцессоров.


2018   учусь

Посетил воркшоп по CJM от Binary District

Прошёл в октябре курс по построению CJM в обучающем центре Binary District. Куратор курса Арслан Разыков из MegaLabs. Обучение было разбито на два дня с 11-00 до 18-00. Эксперты Дарья Романовская и Максим Маратович рассказали теорию и погрузили в процесс интервьюирования и рекрутинга респондентов. Из участников воркшопа были сформированы небольшие рабочие группы по 5-7 человек. Некоторые команды целиком состояли из сотрудников одной компании. У таких команд была возможность решать не выдуманные, а рабочие кейсы. Я же попал в команду Спортмастер. Первый день был посвящён изложению теории и пробному интервью, а второй — рекрутингу, проведению серии интервью, обработке результатов и сборке карты. Респондентов искали тут же на месте. В конце второго дня каждая команда презентовала свою карту. Получил полезный опыт.

PS: новость немного протухла, но решил зафиксировать для истории.

2018   учусь

Посетил воркшоп «Картирование услуг по методике CJM» от Алексея Копылова

Сходил на очередной воркшоп по созданию CJM. Место дислокации — Райффайзенбанк. В этот раз учился у настоящего эксперта в области пользовательских исследований — Алексея Копылова. Упражнялись совместно с коллегами из банка. Было много интересных активностей: рисовали маркерами, клеили стикеры, ну и конечно много обсуждали. С воркшопа унесли карту CJM и печатные брошюрки с теорией.

Посетил митап «Как голосовые технологии меняют жизнь»

В последнее время стал обращать внимание на активности вокруг проектирования голосовых интерфейсов. В связи с бурным развитием отрасли голосовых помощников, в голове возникают вопросы о том, какими навыками должны обладать дизайнеры таких голосовых интерфейсов (voice-user interface, VUI). Мика Голубовский консультант голосового помощника Алисы рассказал, как он создавал навыки для Алисы. После доклада стало очевидно, что это не совсем те дизайнеры в классическом понимании. Презентация тут.

Страница события на Facebook
Страница события на сайте Теплицы

Посетил Design Sprint Meetup

Что-то Мегафон зачастил с митапами. В этот раз спикеры раскрыли тему Дизайн-спринтов. Почерпнул много нового. Узнал: что уже есть спецификация 2.0, дизайн-спринты это нерегулярное мероприятие и есть компании, которые продают эти самые дизайн-спринты. Презентации ниже.

Программа выступлений:

  1. Дмитрий Капаев из Useful «Дизайн-спринт. Как пройти путь от идеи до проверенного прототипа за 5 дней?».
  2. Фёдор Шкляров из AJ&Smart (Berlin). «ДИЗАЙН-СПРИНТ 2.0»

Страница события на Facebbok

Страница события на Timepad

Так же узнал, что есть русская версия книги «Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days». В перевода она называется «Спринт: Как разработать и протестировать новый продукт всего за пять дней». Её можно купить на ЛитРес. Спасибо коллеге Дмитрию Мясникову за наводку. Поставил себе её в план по чтению проф. литературы. Для тех, кто желает почитать в оригинале, рекомендую: сайт проекта и страничка на Google Ventures.

Ранее Ctrl + ↓