x
 
Василий
27 июля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Зачем дизайнеру прототипирование при помощи веб-технологий? С чего начать?


Прототипирование помогает проверить идею сайта, объяснить логику веб-сервиса, попробовать продукт на себе. Прототипы на бумаге или в фотошопе с этим не справляются: их не «прокликаешь», меню не раскроешь, анимацию не покажешь. Кроме того, это двойная работа: сначала рисовали-ровняли макет, теперь делаем то же самое в ХТМЛ и ЦСС.

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

С чего начать?

Начните с ХТМЛ и ЦСС.

ХТМЛ (HTML) — это язык разметки, такой специальный текст. С его помощью мы размечаем, где и какие элементы находятся на странице. Текст, таблицы, формы и картинки — ХТМЛ-элементы.

Элементы создаются с помощью тегов. Название тега связано с типом элемента. Смотрите:

<h1>Заголовок</h1>
<!--
  h1 — заголовок (heading) первого уровня (1).
  Заголовок второго уровня — h2, третьего — h3.
  И так далее до h6.

  Кстати, текст внутри <!-- --> — комментарии,
  браузеры их игнорируют.
-->

<p>
  Слово paragraph в большинстве случаев
  переводится на русский язык — <b>«абзац»</b>.
</p>
<!--
  Чтобы обозначить абзац и отделить его
  от остальных элементов, текст нужно
  завернуть в <p></p>.

  Отбить один абзац от другого энтерами, как в Ворде,
  не получится — браузеры воспримут их
  как пробелы.

  Чтобы сделать текст жирным, нужно завернуть
  его в <b></b>.
-->

<p>
  И ещё один абзац.
</p>

У тегов есть атрибуты, то есть свойства, например, адрес ссылки или выравнивание текста:

<a href="http://bureau.ru/">Сайт бюро</a>
<p align="center">
  Абзац, текст в котором
  выровнен по центру
</p>

У некоторых элементов нет закрывающего тега. Например, у картинки:

<img src="http://awesomepictures.com/200x200.png">
<!-- src — ссылка на картинку -->

Скелет любой ХТМЛ-страницы состоит из четырёх элементов: doctype, html, head и body.

<!doctype html> <!-- Доктайп-заклинание -->
<html>
  <head>
    <!-- «Голова». Здесь находятся служебные теги: название страницы,
         теги для Фейсбука, стили и скрипты -->
  </head>
  <body>
    <!-- «Тело». Содержимое страницы -->
  </body>
</html>

Соберём страницу с портфолио Остапа Бендера:

<!doctype html>
<html>
  <head>
    <title>Портфолио Остапа Бендера</title>
    <!--
      Название страницы.
      Его мы видим в заголовке вкладки
    -->
  </head>
  <body>
    <h1>Портфолио Остапа Бендера</h1>
    <!-- Заголовок первого уровня -->

    <section>
      <!--
        section объединяет элементы в «главу» текста
      -->

      <h2>Кто такой? Чем знаменит?</h2>
      <!-- Заголовок второго уровня -->

      <p class="outstanding">
         Я великий комбинатор,
         идейный борец за денежные знаки.
      </p>
      <!-- Абзац -->

      <p>
         Кроме того, я знаю
         <a href="/projects/400">четыреста
         сравнительно честных
         способа отъёма денег</a>.
      </p>
    </section>

    <section>
      <h2>Аферы</h2>
      <p>
         В городе Арбатове выдал себя за сына
         лейтенанта Шмидта и получил
         от председателя горисполкома
         небольшую материальную помощь.
      </p>
      <!-- И так далее -->
    </section>
  </body>
</html>

ЦСС (CSS) — тоже специальный текст. В нём мы описываем, как выглядят и ведут себя те самые абзацы, заголовки и картинки. ЦСС может находиться прямо в коде страницы внутри тегов <style> или в отдельных файлах, подключённых тегом <link>.

Раскрасим портфолио Остапа Бендера:

<style>
body {
  /*
   * Часть до фигурных скобок — селектор.
   * Селекторы указывают, к каким элементам применять
   * стили внутри фигурных скобок.
   * В данном случае — к содержимому страницы.
   */ 

  background-color: dimgray;
  /* Задаем странице серый фон */
}

h1, h2 {
  color: white;
  /* Перекрашиваем заголовки в белый */
}

p {
  color: white;
  /* Перекрашиваем абзацы в белый */
}

.outstanding {
  font-size: 150%;
  /* Увеличиваем кегль в полтора раза */

  font-style: italic;
  /* Курсивим текст */

  /*
   * .outstanding — селектор по классу.
   * Его стили применятся к элементам
   * с атрибутом class, содержащим outstanding.
   * В данном случае — к абзацу
   * про великого комбинатора.
   */
}
</style>
Попробуйте самостоятельно добавить текста и поменять цвет ссылок в портфолио Остапа Бендера

Что дальше?

Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры — Ctrl-U или Command-Alt-U.

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как бороться с багами? Часть шестая: изолировать 4 Как бороться с багами? Часть пятая: повторить Почему вы используете jQuery для хождения по дереву и управления событиями? 2




Недавно всплыло

4 4 3 2