| Автор |
Сообщение |
|
Music Listener
|
Практика верстки под мобильные устройства
  Год выпуска: 2013  Страна: Россия  Тематика: HTML, CSS, JavaScript, PHP  Тип материала: Обучающее видео  Продолжительность: ~ 22 часа  Автор: Андрей Бернацкий  Язык: Русский
  Как создать сайт, который бы одинаково хорошо выглядел и идеально функционировал на всех типах устройств? Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план... А значит, растет спрос на сайты под планшетные и мобильные устройства. Перед Вами видеокурс, где есть всё, чтобы в полной мере овладеть необходимыми знаниями и навыками для создания универсальных адаптивных сайтов. Это новое обучающее руководство от WebForMyself.com, разработанное Андреем Бернацким, поможет вам легко и в кратчайшие сроки постичь самую сложную в реализации верстку. Описание разделов курса Раздел 1. Верстка макета APPIX Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса мы с вами из исходника дизайна в формате PSD с нуля сверстаем данный макет.
При верстке макета APPIX мы рассмотрим практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.
- Как максимально эффективно исследовать PSD-макет сайта.
- Как определить подходящую разметку страницы.
- Как эффективно использовать медиа-запросы.
- Как адаптивно работать с изображениями.
- Как вместить широкое меню в узкий экран смартфона.
- Как эффективно использовать позиционирование для адаптивных сайтов.
- Узнаете тонкости поведения плавающих блоков и свойства float.
- Как использовать свойство float для адаптивных сайтов.
- Как определить и вырезать необходимые изображения.
- Как описать, казалось бы, табличную структуру блоками.
- Как выравнивать элементы для адаптивной верстки.
- Как эффективно задавать отступы для адаптивных сайтов.
- Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
- Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
- Как, используя firebug, найти нужные стили и изменить их.
- Как эффективно использовать псевдо-классы.
- Как скруглить углы для изображений, используя CSS 3.
- Как избежать схлопывания границ блока.
Раздел 2. Верстка макета CREATIVE+
Во втором блоке курса мы будем работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру.
В рамках данного блока курса мы сделаем адаптивную верстку макета CREATIVE+. Верстку будем делать адаптивную и в тоже время резиновую. Это позволит нам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.
- Как максимально эффективно исследовать PSD макет сайта.
- Как определить подходящую разметку страницы.
- Как эффективно использовать медиа запросы.
- Как адаптивно работать с изображениями.
- Как назначать широкие фоновые изображения для адаптивных сайтов.
- Как вместить широкое меню в узкий экран смартфона.
- Как эффективно использовать позиционирование для адаптивных сайтов.
- Узнаете тонкости поведения плавающих блоков и свойства float.
- Как использовать свойство float для адаптивных сайтов.
- Как определить и вырезать необходимые изображения.
- Как выравнивать элементы для адаптивной верстки.
- Как эффективно задавать отступы для адаптивных сайтов.
- Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
- Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
- Как, используя firebug, найти нужные стили и изменить их.
Раздел 3. Блок полезных уроков Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, мы их рассмотрим отдельно в данном блоке курса.
В третьей части курса мы улучшим и дополним созданные нами верстки. Рассмотрим дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
- Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать.
- Как установить галерею изображений и сделать ее адаптивной.
- Как установить видео и сделать его адаптивным.
- Как адаптивно работать с формами и почему это важно.
- Как адаптировать громоздкое меню под маленькие экраны.
БОНУСЫ:
Бонус 1. Премиум-курс по CSS 3
CSS3 — новейший стандарт веб-разработок, значительно расширяющий функциональные возможности языков веб-программирования и позволяющий реализовать оригинальные визуальные решения для ваших интернет-проектов.
С помощью CSS3 вы сможете создавать такие привлекательные эффекты, как полупрозрачные фоны, градиенты и тени. Сможете использовать оригинальные шрифты, обычно не применяющиеся в Сети, а также внедрять на сайтах анимацию без использования Flash и javascript.
Все современные браузеры хорошо поддерживают большинство свойств CSS 3, что дает нам возможность использовать их на веб-страницах и получать ожидаемый результат.
Используя CSS 3, вы сможете создавать на своих страницах:
- Визуальные эффекты, не зависящие от изображений. CSS3 предоставляет множество новых свойств, позволяющих создавать визуальные эффекты, которые раньше требовали обязательного использования в изображениях скругленные углы, падающие тени, полупрозрачные фоны, градиенты и изображения в качестве рамок полей.
- Уникальные шрифты. Правило @font-face позволяет создать ссылку на файл шрифта на сервере и использовать его для отображения текста на странице. Это позволяет не ограничиваться шрифтами, доступными на компьютере пользователей, и значительно упрощает красивое оформление текста.
- Переходы. Переходы CSS3 представляют собой простейший тип анимации, меняющий стиль элемента. Например, это может быть плавное изменение цвета кнопки в момент, когда над ней оказывается указатель мыши. Причем для этого не требуется ни Flash, ни javascript.
- Мощные селекторы. Спецификации CSS3 включают множество новых селекторов, в основном относящихся к псевдо-классам и атрибутам. Они позволяют обращаться к определенным фрагментам HTML-кода, не добавляя идентификаторы или классы, что упрощает код и защищает его от ошибок.
- Трансформации полей. Еще одна категория визуальных эффектов, ставших возможными с появлением CSS3. С ее помощью можно управлять положением и формой блока в двумерном и трехмерном пространствах — это поворот, масштабирование, наклон блока и т.д.
Все это и многое другое вы узнаете и сможете применять на своих веб-сайтах, пройдя курс по CSS 3.
Бонус 2. Уроки по работе в программе Dreamweaver
Web-страницы можно создавать в любом текстовом редакторе. Даже обычного блокнота будет достаточно для создания web-страницы. Но есть программы, которые созданы специально, чтобы облегчить жизнь разработчику. Это программы, которые ускоряют и автоматизируют процесс создания web-страниц. Одна из них — программа для создания web-страницDreamweaver. Она дает массу возможностей для ускорения и упрощения процесса создания сайтов. Обладает гибким и легко настраиваемым под себя окном разработчика. Изучив данный бонус, вы без труда сможете пользоваться программой, что ускорит процесс создания и наполнения web-страниц.
Вы сможете настроить или создать свое собственное окно разработчика, что обеспечит максимально удобное использование программы.
В уроках рассмотрены все панели инструментов, которые предоставляет программа. Плюс к этому, показано, как создать свою панель инструментов, удобную специально для вас. Здесь также рассмотрены спорные возможности работы программы и последствия, к которым они могут привести.
Бонус 3. Сборник полезных инструментов веб-разработчика
Если к первой группе можно отнести специализированные для web редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров. В данном бонусе речь пойдет именно о тех инструментах, которые используются как расширения для браузеров. Они достаточно просты и удобны в использовании. Поскольку они установлены в сам браузер, то позволяют анализировать, тестировать, исправлять текущую загруженную страницу и сразу же видеть результат изменений на этой же страницы. Изучив уроки, вы сможете всевозможными методами протестировать страницу. Сможете быстро вносить изменения в код и тут же видеть результат. Освоите инструмент, который позволяет быстро находить и исправлять ошибки. С помощью инструментов вы сможете переделывать целые куски кода прямо из браузера, анализировать и оценивать оптимизацию страницы и многое-многое другое. Доп. информация Какие навыки и знания вы получите после прохождения курса? - Любые сайты (в т.ч. на движке WordPress) вы будете с легкостью делать адаптивными ко всем существующим устройствам.
- Будете профессионально делать верстку, которая адаптируется и хорошо смотрится не зависимо от разрешения устройства.
- Вы освоите работу с медиа-запросами, которая подробно будет рассмотрена на примере верстки макетов.
- Сможете виртуозно адаптировать изображения и галереи с сохранением отличного качества.
- Научитесь профессионально устанавливать собственное видео (или с YouTube, Vimeo и др.) без потери элементов управления.
- Освоите работу с 3-мя, 4-мя колонками контента, а также с 2-мя колонками, включающими в себя подколонки.
- Вы будете качественно работать с изображениями и видео-контентом в адаптивной верстке.
- Узнаете, как должны уменьшаться и располагаться блоки при просмотре верстки на различных устройствах: от широких — к узким.
- Вы научитесь правильно работать с широкими фоновыми изображениями в шапке сайта для мобильных устройств.
- Также научитесь делать меню и многоуровневые меню, адаптированные под сенсорные экраны.
- Вы будете правильно использовать инструменты тестирования адаптивной верстки.
- Узнаете, как адаптировать верстку под альбомную и портретную ориентацию мобильных устройств.
- Вы освоите все инструменты и сервисы для более быстрой и удобной верстки.
- И еще многое-многое другое…
Кому курс будет исключительно полезен?
- Владельцам собственных сайтов. Вы сможете легко переделать любой свой сайт, сделать его адаптивным. Это заметно повысит престиж сайта, но главное — привлечет ощутимую часть дополнительного трафика.
- Разработчикам. Вы приобретете дополнительные полезные навыки, освоите новые технологии, повысив тем самым свой профессионализм.
- Фрилансерам. Резиново-адаптивная верстка стоит дороже, чем статичная или резиновая. Значит, у вас есть отличная возможность для увеличения своего бюджета и привлечения новых заказчиков.
 Качество: autorun.exe  Формат: MP4  Видео кодек: AVC  Аудио кодек: AAC-LC - Видео: avc1, ~409 Кбит/сек, 1024*768, 15 кадров/сек
- Аудио: Русский, AAC-LC, 103 Кбит/сек, 2 каналов, 44,1 КГц
| [rustorka.com]Практика верстки под мобильные устройства (2013).torrent |
| Трекер: |
Зарегистрирован |
Скачать .torrent
40 KB
|
| Статус: |
√ проверено (by Music Listener в 02-Сен-14 21:32)
|
| Зарегистрирован: |
02-Сен-14 19:04 |
| Скачан: |
46 раз |
| Размер: |
3.73 GB |
|
| Поблагодарили: |
Скачать Практика верстки под мобильные устройства. Видеокурс [Андрей Бернацкий] (2013, HTML, CSS, JavaScript, PHP, PCRec) от R.G. Мастер-Класс торрент |
|
|
Похожие раздачи
|
|
|
Текущее время: 03-Май 11:06
Часовой пояс: GMT + 3
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
|
|
