Создание веб-сайта. Курс молодого бойца

Создание веб-проекта

Краткий обзор

Основные этапы работы

Планирование Дизайн Разработка

Планирование

Данный этап можно разделить на несколько подэтапов:

Создание идеи Разработка структуры проекта Проработка макета проекта

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

Определиться с темой (идеей) Собрать материал

Разработка структуры проекта

На данном этапе можно классифицировать материал по темам и разделам. За счёт чего уже может появиться структура проекта и понимание о внешнем виде проекта.

Проработка макета проекта

На данном этапе мы составляем схематичный набросок будущей страницы.


Основные элементы страницы


Содержащий блок (контейнер) Логотип Навигация Контент Нижний колонтитул (footer) Свободное пространство (whitespace)


Резиновый и фиксированный макеты


Фиксированный макет: Сайт всегда занимает одинаковую ширину Все значения задаются в пикселях


«Резиновый» макет: Можно подразделить на такие понятия как AWD и

RWD

AWD – Adaptive Web Design (Адаптивный Веб-дизайн) При изменении размера экрана сайт подстраивается

под него (адаптируется)

RWD – Responsive Web Design (Отзывчивый Веб-дизайн) Сайт меняет своё отображение лишь на определённых

разрешениях (отзывается на условия среды)


Отзывчивый дизайн против Адаптивного


При работе с адаптивным и отзывчивыми сайтами обычно создаётся несколько макетов под соответствующие разрешения


Модульная сетка Наиболее популярной сеткой является 960GS


Макеты веб-страниц:1. Навигация в левом столбце


Макеты веб-страниц:2. Навигация в правом столбце


Макеты веб-страниц:3. Навигация в двух столбцах


Макеты веб-страниц:4. Горизонтальная навигация


Mobile First

При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.


Полезные ссылки Пример сайта, использующего концепцию адаптивного веб-

дазайна: http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

Библиотеки с примерами сайтов и прототипов:http://unmatchedstyle.com/galleryhttp://cssdrive.comhttp://foundation.zurb.com/templates.htmlhttp://zurb.com/patterntap

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне

http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

http://unmatchedstyle.com/gallery

http://unmatchedstyle.com/gallery

http://cssdrive.com/



http://foundation.zurb.com/templates.html



http://zurb.com/patterntap



Дизайн

Основные этапы:

Выбор основного цвета проекта (на основе mood board)

Составление цветовой гаммы проекта Работа непосредственно над дизайн-

макетом

Выбор основного цвета

Составить список синонимов, описывающих проект

Каждый синоним набирается в поиске по картинкам Google или Yandex

На основе найденных изображений выбирается основной цвет

Составление цветовой гаммы

Color Scheme Designer 3

Составление цветовой гаммы проекта Adobe Color CC

COLORlovers

Работа над дизайн-макетом

При работе над дизайн-макетом стоит помнить о таких понятиях, как:

Элементы Call to Action AIDA Схема просмотра страницы Визуальные направляющие


Элементы Call to Action


AIDA (Attraction Interest Desire Action)


Схема просмотра страницы


Визуальные направляющие


Использование Framework’ов

Bootstrap Zurb Foundation Material Design Lite


Трэнды

Landing Pages Скевоморфизм Flat UI


Landing Pages


Скевоморфизм


Flat UI

Полезные ссылки и материалы

Color Scheme Designer 3: http://colorschemedesigner.com/csd-3.5/ Adobe Color CC: https://color.adobe.com/ru/ COLORlovers: http://www.colourlovers.com/ Сравнение концепции скевоморфизма и плоского дизайна:

http://www.flatvsrealism.com/ Книга. Джейсон Берд: Веб-дизайн. Руководство

разработчика: http://www.labirint.ru/books/327884/

http://colorschemedesigner.com/csd-3.5/



https://color.adobe.com/ru/



http://www.colourlovers.com/



http://www.flatvsrealism.com/

http://www.flatvsrealism.com/

http://www.labirint.ru/books/327884/



Разработка

Редакторы кода:

Sublime Text Atom Brackets


Обзоры текстовых редакторов: Atom:

https://www.youtube.com/playlist?list=PLY4rE9dstrJzpFizUPSJkSZ9fgdyB4hRL

Sublime Text: https://www.youtube.com/watch?v=uZm-Z08jPtI Brackets: https://www.youtube.com/watch?v=rvo3Mv1Z4qU



https://www.youtube.com/watch?v=uZm-Z08jPtI

https://www.youtube.com/watch?v=rvo3Mv1Z4qU

https://www.youtube.com/watch?v=rvo3Mv1Z4qU


О отзывчивом веб-дизайнe и Mobile First есть неплохие книги:

Отзывчивый веб-дизайн: http://www.mann-ivanov-ferber.ru/books/book-apart/otzivchivij-web-design/

Сначала мобильные: http://www.mann-ivanov-ferber.ru/books/book-apart/mobilfirst/

http://www.mann-ivanov-ferber.ru/books/book-apart/otzivchivij-web-design/

http://www.mann-ivanov-ferber.ru/books/book-apart/otzivchivij-web-design/

http://www.mann-ivanov-ferber.ru/books/book-apart/mobilfirst/

http://www.mann-ivanov-ferber.ru/books/book-apart/mobilfirst/


Структура проекта


Основные этапы:

Написание HTML Написание CSS Написание JS

Написание HTML

HTML5 html5shiv Modernizr Правила именования классов

HTML5

На сегодняшний день можно уже смело использовать тэги разметки, определённые в спецификации HTML5: header, main, footer, section, article, nav и пр.

Нужно использовать краткую запись типа документа:<!DOCTYPE html>

Всегда указывать кодировку документа: <meta charset="UTF-8">

html5shiv и Modernizr

html5shiv – плагин, который обеспечивает поддержку новых стандартов в старых браузерах

Modernizr – библиотека, позволяющая определять какие свойства и возможности можно использовать в данном браузере (сборка Modernizr включает в себя html5shim)

Правила именования классов

Имена классов должны давать чёткое понятие об объекте, к которому они применяются

На сегодняшний день есть несколько известных концепций именования классов и компоновке css: БЭМ и SMACSS

БЭМ

БЭМ – Блок Элемент Модификатор Блок – самостоятельная единица контента (сущность)

.block {}, .search {}, .navigation {}

Элемент – единица контента, которая может существовать только в контексте другой.block __item {}, .search __input{}, .navigation__element {}

Модификатор – класс, определяющий внешний вид блока, элемента или же их состояние.block __item_visible {}, .search __input_theme_green{}, .navigation__element_active {}

SMACSS

SMACSS– Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS

Понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема

К уровню «Базовый» относится всё, что касается непосредственно тэгов html

К уровню «Макет» относится всё, что касается основных составляющих страницы: секции, блоки.

К уровню «Модуль» относится всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.

Уровень «Состояние» отвечает за модификацию модулей и секций в том или ином случае (состоянии): активный, скрыт, использованный и т.п.

Уровень «Тема» чем-то схож с уровнем «Состояние» и отражает, как модули или секции могут выглядеть.

SMACSS

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения: Макет: l- или layout- Так как модули составляют основную часть проекта, именовать

их, используя префикс module- избыточно, поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.

Состояния имеют префикс .is-, напимер .is-hidden {} Уровень Темы именуется подобно модулям.

При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле.


Небольшой курс по основам HTML: http://www.youtube.com/playlist?list=PLY4rE9dstrJyeZlPWoKJr1xKVVnG4w-Hc

http://www.youtube.com/playlist?list=PLY4rE9dstrJyeZlPWoKJr1xKVVnG4w-Hc























Написание CSS

reset.css – сбрасывает все стили браузера в «ноль». В итоге практически все стили мы пишем с нуля

normalize.css - не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к однообразию во всех современных браузерах


Все размеры и отступы берутся непосредственно из дизайн-макета

При фиксированном макете значения переносятся в пикселях как есть

Если работаем с адаптивным или отзывчивым дизайном, то нужно переводить в проценты


Не стоит перегружать ваши стили чрезмерной специфичностью.main –nav ul li a -> .main-nav a

Стили должны быть контекстнонезависимыspan.block {display: block} -> .block {display: block}

Проверяйте необходимость использования браузерных префиксов (http://caniuse.com)

При работе в концепции Mobile First, написание стилей стоит начинать с мобильных, а затем расширять их для других разрешений с помощью медиа запросов@media screen and (min-width: 320px) {}


О CSS3 и CSS рекомендую следующие книги:

CSS. Рецепты программирования: http://www.labirint.ru/books/268185/

Большая книга CSS3: http://www.labirint.ru/books/421224/ CSS3. Руководство разработчика: http://www.labirint.ru/books

/332442/ Небольшой курс по основам CSS:

http://www.youtube.com/playlist?list=PLY4rE9dstrJzdkXYQXpZA0voVgB_0RJ_q













































Написание JS

Часто при работе с сайтом используют библиотеку jQuery

Нужно определить для себя, так ли необходим jQuery в вашем случае

JavaScript используется для манипуляций, но не для стилизации элементов DOM

Не рекомендуется решать задачи, которые явно относятся к уровню CSS, с помощью JavaScript

Написание JS

Progressive Enhacement – разработка происходит с учётом старых браузеров, а затем код модифицируется для более современных

Graceful Degradation – разработка ведётся для современных браузеров, затем код расширяется скриптами и правилами для старых браузеров


Статьи с рекомендациями по написанию JS, HTML и CSS: 10 советов по написанию нативного JavaScript без jQuery:

http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/

Сайт-сборник рекомендаций по JS, HTML и CSS: http://workmanship.io/



http://workmanship.io/

Проверка кода

Для проверки html: https://validator.w3.org/ Для проверки CSS: http://jigsaw.w3.org/css-

validator/ Для проверки JS: http://www.jslint.com/

https://validator.w3.org/

http://jigsaw.w3.org/css-validator/












http://www.jslint.com/








Средства автоматизации

960GS Предлагает, помимо исходников для дизайна

страницы, css правила и классы для переноса дизайна в html и css


Emmet Позволяет писать код (HTML, CSS) с помощью

сокращений, которые затем разворачиваются в полноценные фрагменты кода


Jade Язык работы с шаблонами. Позволяет разбивать

код на части, создавать переиспользуемые блоки и переменные. Компилируется в полноценный html


Командная строка – позволяет ускорить работу с директорией проекта. Служит для запуска других систем автоматизации.

Набрав одну строку: mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html


Sass Препроцессор для работы с CSS. В Sass можно

записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла


HTML5Boilerplate Представляет собой заранее скомпонованный

проект, в котором уже есть index.html, normalize.css и пр. с соответствующим кодом. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку


Gulp и Grunt Сервисы, которые запускают задачи, описанные в

основных файлах данных сервисов. Задачи выполняются с помощью совместимых модулей и запускаются на выполнение в консоли.

Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, а так же проверять css свойства на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.


Bootrstrap, Foundation, Material Design Lite При подключении файлов фрэймворков в

проект, мы можем использовать определённые в этих фрэймворках классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.)

Спасибо

Материал семинара не является исчерпывающим и представляет собой поверхностный взгляд на некоторые технологии.Прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework'и, готовый код и прочее, стоит, всё-таки, изучить основы работы с HTML, CSS и JavaScript.

Надеюсь, что рассмотренные темы будут полезны вам в изучении веб-дизайна и фронтенд разработки.

Создание веб-сайта. Курс молодого бойца

Engineering