Web

Усвоив всё вышесказанное можно переходить к следующему этапу - Дизайн. После создания макета проекта можно переходить непосредственно к созданию дизайн-макета. На данном этапе начать стоит с определения цветовой гаммы проекта. Один из способов определения основного цвета в проекте - это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства. Важно отметить, что при подборе цветов для палитры всегда стоит выбирать как минимум 2 контрастирующих цвета. Так же данный сервис обладает большим архивом палитр других пользователей. Достижение нужного контраста между цветами - необходимое условие для того, чтобы у вас получился хороший интерактивный дизайн.

Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме. Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш. Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Данные фрэймворки уже упоминались в разделе про дизайн. Но стоит опять вспомнить о них, так как они, в определённой степени, помогают автоматизировать процесс разметки веб-страницы и работы с ней. Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Но прежде чем пускаться во все тяжкие, https://lovewiki.faith/wiki/Web , библиотеки, framework'и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

Таблицы выполняют только свою прямую роль - представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами. Стоит отметить, что структуру может быть проще написать, если у нас есть прототип, составленный на первом этапе или же, если мы сами, глядя на дизайн-макет, на бумаге схематично разрисовали себе все блоки страницы. При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы. На этапе написания HTML мы, как бы, создаём скелет страницы, её абстрактную модель при помощи тэгов (языка разметки HTML). https://hikvisiondb.webcam/wiki/Web проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Подход называется БЭМ и расшифровывается, как Блок Элемент Модификатор. Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций. Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS - Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема. К базовому уровню будет относиться всё, что касается непосредственно тэгов html. К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции. К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр. Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.

• Книга Сначала мобильные


• Уровень Темы именуется подобно модулям


• Создание идеи


• Robert Cailliau, 2 ноября 1995[1]


• Книга CSS. Рецепты программирования


• наполнение требуемым функционалом

Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть. В данном подходе используются следующие соглашения по именованию. Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Уровень Темы именуется подобно модулям. При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле. Важно помнить, что любое соглашение по именованию призвано создать определённый уровень абстракции, благодаря которому работать с проектом будет удобно и он не будет перегружен излишним кодом и прочими артефактами. Правила именования классов подводят нас к следующему этапу. Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета. Цель данного свода правил - сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Изначально в проектах повсеместно использовался reset.css, написанный Эриком Мейером. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.