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

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


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

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

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

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

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

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

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

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

<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>
Попро­буйте само­сто­я­тельно доба­вить тек­ста и поме­нять цвет ссы­лок в порт­фо­лио Остапа Бен­дера

Что дальше

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

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

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

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

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

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

Почему лучше разделить фронтенд и бэкенд? 4 Что показывает уровень развития инженерной культуры? Как избежать эффекта Упячки при загрузке картинок 4 Разработчик, который не думает, а просто делает — не нужен? 5




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

Хочу научиться сторителлингу 12 Как найти себе замену 1 2 Как совместить информационный стиль и текст для поисковиков? 7