Прототипирование помогает проверить идею сайта, объяснить логику веб‑сервиса, попробовать продукт на себе. Прототипы на бумаге или в фотошопе с этим не справляются: их не «прокликаешь», меню не раскроешь, анимацию не покажешь. Кроме того, это двойная работа: сначала рисовали‑ровняли макет, теперь делаем то же самое в ХТМЛ и ЦСС.
С помощью веб‑технологий дизайнер сможет создавать живые прототипы, быстрее внедрять свою работу в продукт, проверять гипотезы и делать первые версии своих проектов без разработчиков.
С чего начать?
Начните с ХТМЛ и ЦСС.
Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры —
ХТМЛ(HTML) — это язык разметки, такой специальный текст. С его помощью мы размечаем, где и какие элементы находятся на странице. Текст, таблицы, формы и картинки —
Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры —
Элементы создаются с помощью тегов. Название тега связано с типом элемента. Смотрите:
<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.