Создание веб-сайта. Курс молодого бойца
- 2. Основные этапы работы Планирование Дизайн Разработка
- 3. Планирование Данный этап можно разделить на несколько подэтапов: Создание идеи Разработка структуры проекта Проработка макета проекта
- 4. Создание идеи Определиться с темой (идеей) Собрать материал
- 5. Разработка структуры проекта На данном этапе можно классифицировать материал по темам и разделам. За счёт чего уже может появиться структура проекта и понимание о внешнем виде проекта.
- 6. Проработка макета проекта На данном этапе мы составляем схематичный набросок будущей страницы.
- 8. Проработка макета проекта Основные элементы страницы
- 9. Проработка макета проекта Содержащий блок (контейнер) Логотип Навигация Контент Нижний колонтитул (footer) Свободное пространство (whitespace)
- 10. Проработка макета проекта Резиновый и фиксированный макеты
- 11. Проработка макета проекта Фиксированный макет: Сайт всегда занимает одинаковую ширину Все значения задаются в пикселях
- 12. Проработка макета проекта «Резиновый» макет: Можно подразделить на такие понятия как AWD и RWD AWD – Adaptive Web Design (Адаптивный Веб-дизайн) При изменении размера экрана сайт подстраивается под него (адаптируется) RWD – Responsive Web Design (Отзывчивый Веб-дизайн) Сайт меняет своё отображение лишь на определённых разрешениях (отзывается на условия среды)
- 13. Проработка макета проекта Отзывчивый дизайн против Адаптивного
- 14. Проработка макета проекта При работе с адаптивным и отзывчивыми сайтами обычно создаётся несколько макетов под соответствующие разрешения
- 15. Проработка макета проекта Модульная сетка Наиболее популярной сеткой является 960GS
- 16. Проработка макета проекта Макеты веб-страниц: 1. Навигация в левом столбце
- 17. Проработка макета проекта Макеты веб-страниц: 2. Навигация в правом столбце
- 18. Проработка макета проекта Макеты веб-страниц: 3. Навигация в двух столбцах
- 19. Проработка макета проекта Макеты веб-страниц: 4. Горизонтальная навигация
- 20. Проработка макета проекта Mobile First При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.
- 21. Проработка макета проекта Полезные ссылки Пример сайта, использующего концепцию адаптивного веб-дазайна: http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html Библиотеки с примерами сайтов и прототипов: http://unmatchedstyle.com/gallery http://cssdrive.com http://foundation.zurb.com/templates.html http://zurb.com/patterntap На первых двух сайтах можно посмотреть какие цвета использовались в дизайне
- 22. Дизайн Основные этапы: Выбор основного цвета проекта (на основе mood board) Составление цветовой гаммы проекта Работа непосредственно над дизайн-макетом
- 23. Выбор основного цвета Составить список синонимов, описывающих проект Каждый синоним набирается в поиске по картинкам Google или Yandex На основе найденных изображений выбирается основной цвет
- 24. Составление цветовой гаммы Color Scheme Designer 3
- 25. Составление цветовой гаммы проекта Adobe Color CC COLORlovers
- 26. Работа над дизайн-макетом При работе над дизайн-макетом стоит помнить о таких понятиях, как: Элементы Call to Action AIDA Схема просмотра страницы Визуальные направляющие
- 27. Работа над дизайн-макетом Элементы Call to Action
- 28. Работа над дизайн-макетом AIDA (Attraction Interest Desire Action)
- 29. Работа над дизайн-макетом Схема просмотра страницы
- 30. Работа над дизайн-макетом Визуальные направляющие
- 31. Работа над дизайн-макетом Использование Framework’ов Bootstrap Zurb Foundation Material Design Lite
- 32. Работа над дизайн-макетом Трэнды Landing Pages Скевоморфизм Flat UI
- 33. Работа над дизайн-макетом Landing Pages
- 34. Работа над дизайн-макетом Скевоморфизм
- 35. Работа над дизайн-макетом Flat UI
- 36. Полезные ссылки и материалы 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/
- 37. Разработка Редакторы кода: Sublime Text Atom Brackets
- 38. Полезные ссылки и материалы Обзоры текстовых редакторов: 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
- 39. Полезные ссылки и материалы О отзывчивом веб-дизайн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/
- 41. Разработка Основные этапы: Написание HTML Написание CSS Написание JS
- 42. Написание HTML HTML5 html5shiv Modernizr Правила именования классов
- 43. HTML5 На сегодняшний день можно уже смело использовать тэги разметки, определённые в спецификации HTML5: header, main, footer, section, article, nav и пр. Нужно использовать краткую запись типа документа: <!DOCTYPE html> Всегда указывать кодировку документа: <meta charset="UTF-8">
- 44. html5shiv и Modernizr html5shiv – плагин, который обеспечивает поддержку новых стандартов в старых браузерах Modernizr – библиотека, позволяющая определять какие свойства и возможности можно использовать в данном браузере (сборка Modernizr включает в себя html5shim)
- 45. Правила именования классов Имена классов должны давать чёткое понятие об объекте, к которому они применяются На сегодняшний день есть несколько известных концепций именования классов и компоновке css: БЭМ и SMACSS
- 46. БЭМ БЭМ – Блок Элемент Модификатор Блок – самостоятельная единица контента (сущность) .block {}, .search {}, .navigation {} Элемент – единица контента, которая может существовать только в контексте другой .block __item {}, .search __input{}, .navigation__element {} Модификатор – класс, определяющий внешний вид блока, элемента или же их состояние .block __item_visible {}, .search __input_theme_green{}, .navigation__element_active {}
- 47. SMACSS SMACSS– Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS Понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема К уровню «Базовый» относится всё, что касается непосредственно тэгов html К уровню «Макет» относится всё, что касается основных составляющих страницы: секции, блоки. К уровню «Модуль» относится всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр. Уровень «Состояние» отвечает за модификацию модулей и секций в том или ином случае (состоянии): активный, скрыт, использованный и т.п. Уровень «Тема» чем-то схож с уровнем «Состояние» и отражает, как модули или секции могут выглядеть.
- 48. SMACSS В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения: Макет: l- или layout- Так как модули составляют основную часть проекта, именовать их, используя префикс module- избыточно, поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр. Состояния имеют префикс .is-, напимер .is-hidden {} Уровень Темы именуется подобно модулям. При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле.
- 49. Полезные ссылки и материалы Небольшой курс по основам HTML: http://www.youtube.com/playlist?list=PLY4rE9dstrJyeZlPWoKJr1xKVVnG4w- Hc
- 50. Написание CSS reset.css – сбрасывает все стили браузера в «ноль». В итоге практически все стили мы пишем с нуля normalize.css - не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к однообразию во всех современных браузерах
- 51. Написание CSS Все размеры и отступы берутся непосредственно из дизайн-макета При фиксированном макете значения переносятся в пикселях как есть Если работаем с адаптивным или отзывчивым дизайном, то нужно переводить в проценты
- 52. Написание 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) {}
- 53. Полезные ссылки и материалы О 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
- 54. Написание JS Часто при работе с сайтом используют библиотеку jQuery Нужно определить для себя, так ли необходим jQuery в вашем случае JavaScript используется для манипуляций, но не для стилизации элементов DOM Не рекомендуется решать задачи, которые явно относятся к уровню CSS, с помощью JavaScript
- 55. Написание JS Progressive Enhacement – разработка происходит с учётом старых браузеров, а затем код модифицируется для более современных Graceful Degradation – разработка ведётся для современных браузеров, затем код расширяется скриптами и правилами для старых браузеров
- 56. Полезные ссылки и материалы Статьи с рекомендациями по написанию JS, HTML и CSS: 10 советов по написанию нативного JavaScript без jQuery: http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without- jquery/ Сайт-сборник рекомендаций по JS, HTML и CSS: http://workmanship.io/
- 57. Проверка кода Для проверки html: https://validator.w3.org/ Для проверки CSS: http://jigsaw.w3.org/css-validator/ Для проверки JS: http://www.jslint.com/
- 58. Средства автоматизации 960GS Предлагает, помимо исходников для дизайна страницы, css правила и классы для переноса дизайна в html и css
- 59. Средства автоматизации Emmet Позволяет писать код (HTML, CSS) с помощью сокращений, которые затем разворачиваются в полноценные фрагменты кода
- 60. Средства автоматизации Jade Язык работы с шаблонами. Позволяет разбивать код на части, создавать переиспользуемые блоки и переменные. Компилируется в полноценный html
- 61. Средства автоматизации Командная строка – позволяет ускорить работу с директорией проекта. Служит для запуска других систем автоматизации. Набрав одну строку: 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
- 62. Средства автоматизации Sass Препроцессор для работы с CSS. В Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла
- 63. Средства автоматизации HTML5Boilerplate Представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. с соответствующим кодом. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку
- 64. Средства автоматизации Gulp и Grunt Сервисы, которые запускают задачи, описанные в основных файлах данных сервисов. Задачи выполняются с помощью совместимых модулей и запускаются на выполнение в консоли. Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, а так же проверять css свойства на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.
- 65. Средства автоматизации Gulp и Grunt Сервисы, которые запускают задачи, описанные в основных файлах данных сервисов. Задачи выполняются с помощью совместимых модулей и запускаются на выполнение в консоли. Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, а так же проверять css свойства на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.
- 66. Средства автоматизации Bootrstrap, Foundation, Material Design Lite При подключении файлов фрэймворков в проект, мы можем использовать определённые в этих фрэймворках классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.)
- 67. Спасибо Материал семинара не является исчерпывающим и представляет собой поверхностный взгляд на некоторые технологии. Прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework'и, готовый код и прочее, стоит, всё-таки, изучить основы работы с HTML, CSS и JavaScript. Надеюсь, что рассмотренные темы будут полезны вам в изучении веб-дизайна и фронтенд разработки.