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

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

Название: Воркшоп по вёрстке адаптивной веб-страницы
Год выпуска: 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

атолл

Никто ещё не поставил оценку

Другое

Временно нет данных

05-09-2015 9:19:52 (17 минут назад)

05-09-2015 6:11:27

7.65 GB (8216359389 Bytes)

закладки

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

Добавлен	Название		Размер	Пиры
02 Сен 15	3DS MAX - Дизайн интерьера от А до Я. Видеокурс (2015) PCRec		8.02 GB	45 7
02 Сен 15	Обучение профессии верстальщика. Видеокурс (2015) PCRec		14.67 GB	37 10
01 Сен 15	Сборка игрового компьютера от А до Я. Видеокурс (2015) PCRec	7	3.09 GB	182 13
24 Авг 15	Видеокурс - Как переиграть Forex. Тренинг (2015)	7	5.65 GB	25 2
23 Авг 15	Node.js Серверное программирование на JavaScript. Видеокурс (2015) PCRec	3	2.36 GB	21 1
23 Авг 15	Специалист. JavaScript. Уровень 3г. HTML5 API. Видеокурс (2015) PCRec	1	699.52 MB	16 1
22 Авг 15	Профессиональная разработка на Ruby on Rails. Видеокурс (2014) PCRec		4.56 GB	13 1

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

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

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

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

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

Все файлы предоставлены пользователями сайта для свободного обмена. Торренты Рутор.org и наши серверы не располагают какими-либо цифровыми копиями аудио-визуальных произведений, мы храним только информацию о них и торрент-файлы, загруженными пользователями для обмена. Для направления жалоб на нарушения исключительных авторских прав, пожалуйста, пишите на email pollyfuckingshit(гав-гав)ro[точка]ру с темой "удалить не читая" или "авторские права"

Новости трекера
08-Июл	На странице Кино теперь можно запускать трейлеры.
04-Мая	Видеоплеер трейлеров снова на службе народу!
04-Мая	На торрентах кино, сериалов и игры теперь можно просматривать трейлеры!
12-Июн	Добавили категорию Топ 24 в разделе Кино. В ней самые популярные фильмы за 24 ч

Топ фильмов сейчас
На альпийских лугах тишь да благодать (1974)	102
Выжившие: Патруль (2024) [S02]	35
Сёгун (2024) [01x01-09 из 10]	633
Охотники за привидениями: Леденящий ужас (2024)	803
Охотники за привидениями: Леденящий ужас (2024)	258

Топ игр сейчас
The Long Drive (2019)	21
Among Us (2018)	17
RimWorld (2018)	23
Terraria (2011)	20

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