rutor.info :: Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс (2015) PCRec

Скачать PSD2HTML_Vorkshop_Kak_nauchitsja_verstat_adapti.torrent
Как тут качать? Добавить rutor.info в поисковую строку

Название: Воркшоп по вёрстке адаптивной веб-страницы
Год выпуска: 2015
Автор: Никита Красник
Жанр: Видеокурс

Содержание:

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

Скриншоты

Выпущено: Россия
Продолжительность: 19:34:03

Файл
Формат: MP4
Качество: PCRec
Видео: AVC/H.264, 1280x720, ~958 Kbps
Аудио: AAC, 2 ch, 192 Kbps

атолл

10 из 10 (2 голосов, самая низкая оценка - 10, самая высокая - 10)

Другое

13-12-2023 19:19:06 (24 месяца назад)

05-09-2015 5:11:27 (125 месяцев назад)

7.65 GB (8216359389 Bytes)

закладки

Связанные раздачи

Добавлен	Название		Размер	Пиры
18 Окт 23	Grand Secret, Максим Волков и др. - Подборка видеокурсов школы массажа Grand Secret (2019-2023) WEBRip 720p \| MP4, TS		99.91 GB	6 1
10 Янв 23	Мультитренажер своими руками за 7 дней. Видеокурс (2014) PCRec	8	2.34 GB	3 0
29 Июл 21	Оксана Долинка - Деловой Английский за 5 недель [Видеокурс] (2021) WEBRip 720p		3.18 GB	2 0
09 Июл 21	Мария Батхан - Разборки с училкой [Видеокурс] (2020) WEBRip 1080p	2	18.26 GB	1 0
07 Июл 21	Дмитрий Скоромнов - Настройка MikroTik за 15 шагов [Видеокурс] (2019) WEBRip 720p	2	252.14 MB	12 0
27 Янв 21	Специалист. HTML и CSS. Уровень 1-3. Видеокурс (2016) PCRec	13	5.85 GB	2 0
20 Дек 20	В мир электричества - как в первый раз! - 2. Видеокурс (2014) PC		3.77 GB	1 3
19 Дек 20	В мир электричества - как в первый раз! Видеокурс (2009) PC	1	3.91 GB	1 0

Искать ещё похожие раздачи

Написать комментарий

Zt@Z	22-05-2016 16:47:31 (116 месяцев назад)
сам пример верстки - просто кошмар.... косяков полно.. не рекомендую учится по ней

R.O.T.O.R	29-10-2015 15:44:24 (123 месяца назад)	Оценил на: 10
Как раз сейсас очень нужно - спасибо Вам атолл за умные раздачи!

Alexs555	05-09-2015 15:26:09 (125 месяцев назад)	Оценил на: 10

Файлы для обмена предоставлены пользователями сайта. Администрация не несёт ответственности за их содержание. На сервере хранятся только торрент-файлы. Это значит, что мы не храним никаких нелегальных материалов. Реклама.

Новости трекера
22-Апр	Новый Адрес: RUTOR.INFO и RUTOR.IS
29-Ноя	Вечная блокировка в России
09-Окт	Путеводитель по RUTOR.is: Правила, Руководства, Секреты