«Воркшоп "Как научиться верстать адаптивную страницу из PSD-макета за 7 дней"» [PSD2HTML]

Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно. Настройка среды разработки: графический редактор, редактор кода и другие дополнительные инструменты, необходимые для удобной и эффективной работы День 1: На какой операционной системе работать? Разнообразие веб-браузеров. Краткий обзор сервиса BrowserStack.com для кросс-браузерного тестирования и немного про виртуальные машины. Коротко о графических редакторах. Коротко о редакторах кода. Браузер Google Chrome и установка плагинов. Обзор плагинов PerfectPixel и HTML5 Outline. Другие браузеры и их отличия. Обзор LiveReload 2 и демонстрация силы командной строки и автоматизации работы. Разбираемся с "Инструментами разработчика" в Google Chrome (правка DOM-дерева и CSS-стилей, доступ к ресурсам страницы, эмуляция различных устройств для тестирования адаптивности и др.) Какую версию Photoshop поставить для воркшопа? Редактор кода Sublime Text 3, как устанавливать плагины и как максимально ускорить свою работу в ST. Список плагинов, которые нам понадобятся для работы в воркшопе. Методология познания. Как учиться веб-разработке? Анализ макета. На этом этапе мы коснемся того, как оценивать объем работ глядя на имеющийся макет, а также как в уме или на бумаге готовиться к верстке. День 2: Введение в проблематику вопроса. Общие аспекты анализа макета. Технические аспекты анализа макета. Пример плохого PSD-макета. Пример хорошего PSD-макета. Чем еще отличается хороший макет от плохого? Анализ PSD-макета Jetro, который верстается в процессе воркшопа. Немного об особенностях работы на фрилансе. Работа с макетом в среде Adobe Photoshop и извлечение графики для будущей веб-страницы. День 3: Типы графических форматов. Растровые изображения. Типы графических форматов. Векторные изображения. Немного о формате SVG. Способы перевода растрового изображения в векторное (трассировка). Извлечение графики из макета Jetro. Старый способ. Извлечение графики из макета Jetro. Новый способ. Подготовительные действия и начало верстки HTML-каркаса. Мы будем использовать популярный фреймворк Bootstrap. Многие хотели бы узнать как его применить на практике, чем мы и займемся с тобой на реальном примере. День 4: Введение и немного истории: от табличной верстки к блочной. Семантика HTML и алгоритм HTML Outline. Старый алгоритм: HTML 4 Outline. Новый алгоритм: HTML5 Outline. Подключение Bootstrap и верстка HTML-каркаса макета Jetro. Настройка фреймворка Bootstrap и стилизация страницы через CSS. В нашей работе мы применим препроцессор Less. Если до этого ты с ним не сталкивался, то будешь поражён насколько это ускоряет работу! День 5: Обзор возможностей официального сайта Bootstrap. Разбираем сборщик Bootstrap’a. Настройка, компиляция и замена стандартного стилевого файла Bootstrap на файл с настроенными переменными под макет Jetro. Брейкпоинты (breakpoints), медиа-запросы (media queries) и ширина макета. Начинаем стилизацию. Настройка Less и LiveReload. Переменные в Less. Задаем цветовые переменные для макета. Кросс-браузерное подключение шрифтов и их конвертация через сервис FontSquirrel.com. Пишем общие стили. Стилизация навигационной панели с логотипом. Стилизация слайдера. Продолжаем стилизацию нашей страницы и подгоняем все детали. День 6: Что такое Flexbox’ы и как с ними работать. Продолжаем стилизацию макета Jetro: Секция INTRO ARTICLES. Секция RECENT WORKS. Секция FOOTER. Дорабатываем слайдер. На заключительном этапе, мы сделаем веб-страницу адаптивной, то есть хорошо выглядящей на различных устройствах. Попутно будут рассмотрены сопутствующие техники и подходы. День 7: Адаптивность и отзывчивость. Что к чему? Прикручиваем адаптивность к макету Jetro: Секции LOGO и NAVBAR. Секция SLIDER. Секция INTRO ARTICLES. Секция RECENT WORKS. Секция FOOTER. ЗАКОНЧЕННЫЙ ВИД МАКЕТА JETRO! День 8 (только для VIP): Будут рассмотрены методы максимальной оптимизации веб-страницы. Краткое содержание: Анализ скорости загрузки через Инструменты Разработчика в Google Chrome: Детальный обзор вкладки Network и её возможностей. Последовательность загрузки файлов веб-страницы, как правильно подключать CSS, JS и остальные ресурсы. Как извлекать информацию из временной диаграммы загрузки (Timeline) Инструментов Разработчика в Chrome. Устранение ошибок 404 (если ресурс не найден). Уменьшение размеров HTML,CSS и JS-файлов: Что такое минификация и офускация. Убираем все лишнее из файлов Bootstrap с помощью сборщика на официальном сайте http://getbootstrap.com. CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы. Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро. Оптимизация и минификация HTML-страниц. Графика и шрифты: Оптимизация графики. JPG, PNG, SVG и кодирование в base64 - когда что лучше использовать? Оптимизация шрифтов и практическое использование SVG. Удаление лишних файлов.