Практика верстки под мобильные устройства (2013) Видеокурс
28.11.2013, 14:20
Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план. А значит, растет спрос на сайты под планшетные и мобильные устройства. Это новое обучающее руководство разработанное Андреем Бернацким, поможет вам легко и в кратчайшие сроки постичь самую сложную в реализации верстку.
Чему научитесь * Любые сайты (в т.ч. на движке WordPress) вы будете с легкостью делать адаптивными ко всем существующим устройствам. * Будете профессионально делать верстку, которая адаптируется и хорошо смотрится не зависимо от разрешения устройства. * Вы освоите работу с медиа-запросами, которая подробно будет рассмотрена на примере верстки макетов. * Сможете виртуозно адаптировать изображения и галереи с сохранением отличного качества. * Научитесь профессионально устанавливать собственное видео (или с YouTube, Vimeo и др.) без потери элементов управления. * Освоите работу с 3-мя, 4-мя колонками контента, а также с 2-мя колонками, включающими в себя подколонки. * Вы будете качественно работать с изображениями и видео-контентом в адаптивной верстке. * Узнаете, как должны уменьшаться и располагаться блоки при просмотре верстки на различных устройствах: от широких — к узким. * Вы научитесь правильно работать с широкими фоновыми изображениями в шапке сайта для мобильных устройств. * Также научитесь делать меню и многоуровневые меню, адаптированные под сенсорные экраны. * Вы будете правильно использовать инструменты тестирования адаптивной верстки. * Узнаете, как адаптировать верстку под альбомную и портретную ориентацию мобильных устройств. * Вы освоите все инструменты и сервисы для более быстрой и удобной верстки. * И еще многое-многое другое…
Кому курс будет исключительно полезен? Владельцам собственных сайтов. Вы сможете легко переделать любой свой сайт, сделать его адаптивным. Это заметно повысит престиж сайта, но главное — привлечет ощутимую часть дополнительного трафика. Разработчикам. Вы приобретете дополнительные полезные навыки, освоите новые технологии, повысив тем самым свой профессионализм. Фрилансерам. Резиново-адаптивная верстка стоит дороже, чем статичная или резиновая. Значит, у вас есть отличная возможность для увеличения своего бюджета и привлечения новых заказчиков.
Описание разделов курса Раздел 1. Верстка макета APPIX Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса мы с вами из исходника дизайна в формате PSD с нуля сверстаем данный макет.
Изучив этот блок курса, вы узнаете: Как максимально эффективно исследовать PSD-макет сайта. Как определить подходящую разметку страницы. Как эффективно использовать медиа-запросы. Как адаптивно работать с изображениями. Как вместить широкое меню в узкий экран смартфона. Как эффективно использовать позиционирование для адаптивных сайтов. Узнаете тонкости поведения плавающих блоков и свойства float. Как использовать свойство float для адаптивных сайтов. Как определить и вырезать необходимые изображения. Как описать, казалось бы, табличную структуру блоками. Как выравнивать элементы для адаптивной верстки. Как эффективно задавать отступы для адаптивных сайтов. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете. Как, используя firebug, найти нужные стили и изменить их. Как эффективно использовать псевдо-классы. Как скруглить углы для изображений, используя CSS 3. Как избежать схлопывания границ блока.
Раздел 2. Верстка макета CREATIVE+: Во втором блоке курса мы будем работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру.
Изучив этот блок курса, вы узнаете: Как максимально эффективно исследовать PSD макет сайта. Как определить подходящую разметку страницы. Как эффективно использовать медиа запросы. Как адаптивно работать с изображениями. Как назначать широкие фоновые изображения для адаптивных сайтов. Как вместить широкое меню в узкий экран смартфона. Как эффективно использовать позиционирование для адаптивных сайтов. Узнаете тонкости поведения плавающих блоков и свойства float. Как использовать свойство float для адаптивных сайтов. Как определить и вырезать необходимые изображения. Как выравнивать элементы для адаптивной верстки. Как эффективно задавать отступы для адаптивных сайтов. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете. Как, используя firebug, найти нужные стили и изменить их.
Раздел 3. Блок полезных уроков: Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, мы их рассмотрим отдельно в данном блоке курса.
Изучив этот блок курса, вы узнаете: Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать. Как установить галерею изображений и сделать ее адаптивной. Как установить видео и сделать его адаптивным. Как адаптивно работать с формами и почему это важно. Как адаптировать громоздкое меню под маленькие экраны.
БОНУСЫ Бонус 1. Премиум-курс по CSS 3 Бонус 2. Уроки по работе в программе Dreamweaver Бонус 3. Сборник полезных инструментов веб-разработчика
Название: Практика Верстки под Мобильные Устройства Год выпуска: 2013 Исполнитель: Андрей Бернацкий Язык: русский Жанр: обучающее видео
