Loading...
Error
 

Скачать торрент Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс [Никита Красник] (2015, Веб-дизайн, программирование, PCRec) R.G. Мастер-Класс

 
Автор Сообщение

Music Listener

post 26-Авг-15 19:16

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


pic
  • Год выпуска: 2015
  • Страна: Россия
  • Тематика: Веб-дизайн, программирование
  • Тип материала: Обучающее видео
  • Продолжительность: 19:34:03
  • Автор: Никита Красник
  • Язык: Русский
  • Описание:
    Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя!

    «Ускоряй работу без потери качества!» — именно под таким девизом будет проходить воркшоп.
    За 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, который верстается в процессе воркшопа.
    · Немного об особенностях работы на фрилансе.

    Урок 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 с помощью сборщика на официальном сайте http://getbootstrap.com.
    3. CDN-сервисы, что это, зачем нужно и как с них подключать ресурсы.
    4. Оптимизация и минификация нашего стилевого файла style.css. Как писать CSS-селекторы так, чтобы все работало максимально быстро.
    5. Оптимизация и минификация HTML-страниц.
    · Графика и шрифты:
    1. Оптимизация графики. JPG, PNG, SVG и кодирование в base64 — когда что лучше использовать?
    2. Оптимизация шрифтов и практическое использование SVG.
    · Удаление лишних файлов.


  • Качество: PCRec
  • Формат: MP4
  • Видео кодек: AVC
  • Аудио кодек: AAC
  • Видео: avc1, 1152x720, ~958 kbps, 30 fps
  • Аудио: AAC, 44.1 KHz, 2 ch stereo, 192 Kbps



MI

Код:

Общее
Полное имя                               : D:\Мастер-Класс\Воркшоп по вёрстке адаптивной веб-страницы (2015)\Курс\День 0. Введение. Воркшоп по адаптивной верстке с Bootstrap и Less.mp4
Формат                                   : MPEG-4
Профиль формата                          : Base Media / Version 2
Идентификатор кодека                     : mp42
Размер файла                             : 618 Мбайт
Продолжительность                        : 1 ч. 14 м.
Режим общего битрейта                    : Переменный
Общий поток                              : 1153 Кбит/сек
Дата кодирования                         : UTC 2015-05-23 12:16:48
Дата пометки                             : UTC 2015-05-23 12:16:48
gsst                                     : 0
gstd                                     : 4495428
gssd                                     : BADC2926BHM1435699197513612
gshh                                     : r11---sn-n8v7znee.googlevideo.com

Видео
Идентификатор                            : 1
Формат                                   : AVC
Формат/Информация                        : Advanced Video Codec
Профиль формата                          : [email protected]
Параметр CABAC формата                   : Да
Параметр ReFrames формата                : 1 кадр
Идентификатор кодека                     : avc1
Идентификатор кодека/Информация          : Advanced Video Coding
Продолжительность                        : 1 ч. 14 м.
Битрейт                                  : 958 Кбит/сек
Максимальный битрейт                     : 4182 Кбит/сек
Ширина                                   : 1152 пикселя
Высота                                   : 720 пикселей
Соотношение сторон                       : 16:10
Режим частоты кадров                     : Постоянный
Частота кадров                           : 30,000 кадров/сек
Цветовое пространство                    : YUV
Субдискретизация насыщенности            : 4:2:0
Битовая глубина                          : 8 бит
Тип развёртки                            : Прогрессивная
Бит/(Пиксели*Кадры)                      : 0.039
Размер потока                            : 513 Мбайт (83%)
Дата пометки                             : UTC 2015-05-23 12:17:55

Аудио
Идентификатор                            : 2
Формат                                   : AAC
Формат/Информация                        : Advanced Audio Codec
Профиль формата                          : LC
Идентификатор кодека                     : 40
Продолжительность                        : 1 ч. 14 м.
Вид битрейта                             : Переменный
Битрейт                                  : 192 Кбит/сек
Максимальный битрейт                     : 201 Кбит/сек
Каналы                                   : 2 канала
Расположение каналов                     : Front: L R
Частота                                  : 44,1 КГц
Метод сжатия                             : С потерями
Размер потока                            : 103 Мбайт (17%)
Заголовок                                : IsoMedia File Produced by Google, 5-11-2011
Дата кодирования                         : UTC 2015-05-23 12:17:25
Дата пометки                             : UTC 2015-05-23 12:17:55
Скриншоты
     
pic

[rustorka.com]Воркшоп по вёрстке адаптивной веб-страницы (2015).torrent
 СЕРЕБРЯНАЯ РАЗДАЧА! СКАЧАННОЕ ЗАСЧИТЫВАЕТСЯ ТОЛЬКО НАПОЛОВИНУ! 
Вечный
Трекер: Зарегистрирован

magnet ссылка

 


Скачать .torrent

43 KB

Статус: проверено (by Music Listener в 26-Авг-15 20:28)
Зарегистрирован: 26-Авг-15 19:16
Скачан: 124 раза
Размер: 7.65 GB | 
Поблагодарили:
Скачать Воркшоп по вёрстке адаптивной веб-страницы. Видеокурс [Никита Красник] (2015, Веб-дизайн, программирование, PCRec) R.G. Мастер-Класс торрент
 


Похожие раздачи

Текущее время: 28-Мар 21:28

Часовой пояс: GMT + 3



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