Электронная библиотека

ЭЛЕКТРОННАЯ БИБЛИОТЕКА






Добро пожаловать на сайт электронной библиотеки!
Здесь можно найти произведения русских и зарубежных авторов.
Скачать множество книг и журналов различных жанров и направлений.
Большой выбор художественной, бизнес, учебной и технической литературы.
Все представленные здесь книги и журналы имеют подробное описание и обложку.
Наша библиотека регулярно пополняется только новыми и интересными материалами!

«Подробнее о сайте»            «Правила сайта»            «Написать нам»            «Статьи»

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

Видеоуроки





Разместил: tel40plus

4-09-2015, 20:34

Просмотров: 322





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

Ты уже сверстал пару страниц, но чувствуешь что твоих знаний недостаточно? Ты ищешь проверенные практикой приемы, но поиск в интернете дает лишь обрывки информации? Тогда этот воркшоп для тебя! «Ускоряй работу без потери качества!» - именно под таким девизом будет проходить воркшоп. За 7 уроков ты получишь представление о том, как верстается современная адаптивная HTML-страница из графического макета в формате PSD. Мы разберем, как это делать быстро и эффективно.

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


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


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









Похожие публикации

HTML5 и CSS3. Современные средства Web-разработки (2015) Видеокурс HTML5 и CSS3. Современные средства Web-разработки (2015) Видеокурс
Данный курс познакомит слушателей с чертами современной верстки интернет-интерфейсов с поддержкою HTML5/CSS3 и предназначен для широкого круга веб-разработчиков, желающих углубить свои знания и освоить на практике новые возможности, предоставляемые

Юрий Ключевский. Обучение профессия верстальщика (2015) Видеокурс Юрий Ключевский. Обучение профессия верстальщика (2015) Видеокурс
Вы сможете верстать страницы для десктопа и мобильных устройств, узнаете как работать с чужим кодом и правильно публиковать сайты в сети, соберете портфолио из 2-3 сайтов.

Юрий Павлов. Веб дизaйн. Разрaботка и oфoрмление сaйтoв (2014) Видеокурс Юрий Павлов. Веб дизaйн. Разрaботка и oфoрмление сaйтoв (2014) Видеокурс
Веб-дизайнер – специалист, от которого зависит «лицо» и структура сайта. Он разрабатывает логическую схему размещения веб-страниц, продумывает наиболее удобные решения подачи информации и занимается оптимизацией всего графического оформления: от

Фитискин Д., Дмитриев Е., Демидовский Д. HTМL версткa: с нуля до первого макета (2015) Видеокурс Фитискин Д., Дмитриев Е., Демидовский Д. HTМL версткa: с нуля до первого макета (2015) Видеокурс
Авторы программы обучения предлагают пройти видеокурс по изучению HTML-верстке. Пройдя его Вы узнаете: Как писать профессиональный HTML- и СSS-код, а также подбирать модульные сетки для макета. Как пользоваться базовыми инструментами Adobe Photoshop

Допечатная подготовка макета в Adobe Photoshop (2015) Допечатная подготовка макета в Adobe Photoshop (2015)
Вебинар ответит на вопросы, которые на этапе подготовки к печати возникают у дизайнеров-верстальщиков, в частности: в каком максимальном размере можно напечатать файл, что такое цветокоррекция и зачем она нужна, как задать режим печати?

Видеокурс Практика Резиновой Верстки Сайта (2012) Видеокурс Практика Резиновой Верстки Сайта (2012)
Если Вы желаете, чтоб Ваш web-сайт отображался красиво и роскошно в широкоформатных мониторах и еще прекрасно и аккуратненько ужимался в узких, а также любых браузерах самой различной версии то Вам подойдет данное виде-руководство Практика резиновой

Обучающий видеокурс  - Как делается сайт (2012г.) Обучающий видеокурс - Как делается сайт (2012г.)
8 уроков видеокурса "Как делается сайт" подробным образом рассматривают все этапы создания сайта, включая подготовку макета, формирование дизайна, верстку и установку на CMS Wordpress.

Веб - дизайн. Создание корпоративных и информационных сайтов Веб - дизайн. Создание корпоративных и информационных сайтов
Для тех кто решил создать свой сайт Webсеминар по курсу Веб - дизайн. Создание корпоративных и информационных сайтов.

Видео уроки по рисованию макета сайта, его верстки и установки на CMS WordPress Видео уроки по рисованию макета сайта, его верстки и установки на CMS WordPress
Коллектив авторов представляет вашему вниманию восемь бесплатных видео уроков по созданию обалденного дизайна сайта с полного нуля. А кроме того вы узнаете как правильно нарезать графический макет, подготовить графику для сайта и установить готовый




Отзывы и Комментарии

Автор комментария: Сергей Спиридонов
Отличный видеокурс, который будет хорошим началом изучения вёрстки для новичков, верстальщики с опытом также смогут найт в этом курсе полезную информацию. Курс содержит описание основных инструментов для вёрстки wеb-страниц, таких как adobe photoshop, HTML 5.0, CSS, PHP, javascript и другие инструменты. Советую этот курс как дизайнер и верстальщик с опытом.





Добавление комментария

Ваше Имя:
Ваш E-Mail:(необязательно)
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Книги




Союз образовательных сайтов