1. Новые складчины: Показать еще

    26.05.2020: Спортивная куртка (Lorraine Woolheart)

    26.05.2020: Машинное вязание. Возможности электронной машины Brother и работа в ДК (barkinder)

    26.05.2020: Видео Уроки по вязанию и работе в программе Designaknit 8 (barkinder)

    26.05.2020: [Живопись маслом] Водопад: учимся передавать движение (Кристина Горбунова)

    26.05.2020: [Вязание] Основы ручного вязания (Lorraine Woolheart)

  2. Нужен организатор: Показать еще

    26.05.2020: [Живопись маслом] Водопад: учимся передавать движение (Кристина Горбунова)

    26.05.2020: Арбузинка (Наталья Спиридонова)

    26.05.2020: Аудиопрограмма "Любить себя" (Андрей Патрушев)

    26.05.2020: Инна Софийская - Тайны сексуальной энергии

    26.05.2020: Орел из фома. Часы (Татьяна Шмелёва)

  3. Сбор взносов Показать еще

    26.05.2020: [Access Consciousness] Тонкие грани осознанности (Марина Кульпина)

    26.05.2020: Антистартап. Взгляд инвестора (Аркадий Морейнис, Алексей Черняк)

    25.05.2020: Максимальный Инбокс (Александр Канавеев)

    25.05.2020: Как переобуться в онлайн буквально в воздухе (Валерий Глушков, Женя Иванова)

    25.05.2020: [Кондитерка] Вебинар по песочному (Ольга Фан-Юнг)

Скрыть объявление
Здравствуйте, друзья! Наш Розыгрыш 25 тысяч! Только для своих. #3 завершён, итоги подведены, и мы благодарим каждого из вас за участие. Список победителей, видео розыгрыша и другие детали смотрите ТУТ

Ну и, может кто-то уже и забыл, а мы напоминаем - лето ведь на носу!

Проведём последнюю неделю весны вместе очередным розыгрышем ;-) Уже сегодня и до 31 мая у каждого снова есть возможность проверить свою удачу. Подробные условия и детали ТУТ
Доступно

[WebForMySelf] Практика верстки под мобильные устройства

Тема в разделе "Курсы по программированию", создана пользователем Malefisenta, 25 мар 2014.

Хештеги:
Цена:
4800 руб
Взнос:
261 руб
Организатор:
Malefisenta

Список участников складчины:

1. Malefisenta
2. ali-baban96 3. otto 4. 1111_МАРИЯ 5. Serjdiz 6. Young mo 7. dmdesign 8. leo904 9. Gelena 10. Автолюбитель 11. jack-908 12. andreyzz 13. airspace 14. Haosknight
Записаться
Оценить эту складчину: /5,
  1. Malefisenta
    Malefisenta Организатор складчин

    [WebForMySelf] Практика верстки под мобильные устройства

    ПРАКТИКА ВЕРСТКИ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

    [​IMG]

    Описание разделов курса
    Раздел 1. Верстка макета APPIX
    Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса мы с вами
    из исходника дизайна в формате PSD с нуля сверстаем данный макет

    При верстке макета APPIX мы рассмотрим практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.
    1. Как максимально эффективно исследовать PSD-макет сайта.
    2. Как определить подходящую разметку страницы.
    3. Как эффективно использовать медиа-запросы.
    4. Как адаптивно работать с изображениями.
    5. Как вместить широкое меню в узкий экран смартфона.
    6. Как эффективно использовать позиционирование для адаптивных сайтов.
    7. Узнаете тонкости поведения плавающих блоков и свойства float.
    8. Как использовать свойство float для адаптивных сайтов.
    9. Как определить и вырезать необходимые изображения.
    10. Как описать, казалось бы, табличную структуру блоками.
    11. Как выравнивать элементы для адаптивной верстки.
    12. Как эффективно задавать отступы для адаптивных сайтов.
    13. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
    14. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
    15. Как, используя firebug, найти нужные стили и изменить их.
    16. Как эффективно использовать псевдо-классы.
    17. Как скруглить углы для изображений, используя CSS 3.
    18. Как избежать схлопывания границ блока.

    Раздел 2. Верстка макета CREATIVE+:
    Во втором блоке курса мы будем работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру.

    В рамках данного блока курса мы сделаем адаптивную верстку макета CREATIVE+. Верстку будем делать адаптивную и в тоже время резиновую. Это позволит нам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.
    1. Как максимально эффективно исследовать PSD макет сайта.
    2. Как определить подходящую разметку страницы.
    3. Как эффективно использовать медиа запросы.
    4. Как адаптивно работать с изображениями.
    5. Как назначать широкие фоновые изображения для адаптивных сайтов.
    6. Как вместить широкое меню в узкий экран смартфона.
    7. Как эффективно использовать позиционирование для адаптивных сайтов.
    8. Узнаете тонкости поведения плавающих блоков и свойства float.
    9. Как использовать свойство float для адаптивных сайтов.
    10. Как определить и вырезать необходимые изображения.
    11. Как выравнивать элементы для адаптивной верстки.
    12. Как эффективно задавать отступы для адаптивных сайтов.
    13. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
    14. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
    15. Как, используя firebug, найти нужные стили и изменить их.

    Раздел 3. Блок полезных уроков:
    Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, мы их рассмотрим отдельно в данном блоке курса.

    В третьей части курса мы улучшим и дополним созданные нами верстки. Рассмотрим дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
    1. Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать.
    2. Как установить галерею изображений и сделать ее адаптивной.
    3. Как установить видео и сделать его адаптивным.
    4. Как адаптивно работать с формами и почему это важно.
    5. Как адаптировать громоздкое меню под маленькие экраны.


    БОНУСЫ
    Бонус 1. Премиум-курс по CSS 3
    CSS3 — новейший стандарт веб-разработок, значительно расширяющий функциональные возможности языков веб-программирования и позволяющий реализовать оригинальные визуальные решения для ваших интернет-проектов.

    С помощью CSS3 вы сможете создавать такие привлекательные эффекты, как полупрозрачные фоны, градиенты и тени. Сможете использовать оригинальные шрифты, обычно не применяющиеся в Сети, а также внедрять на сайтах анимацию без использования Flash и JavaScript.

    Все современные браузеры хорошо поддерживают большинство свойств CSS 3, что дает нам возможность использовать их на веб-страницах и получать ожидаемый результат.
    1. Визуальные эффекты, не зависящие от изображений. CSS3 предоставляет множество новых свойств, позволяющих создавать визуальные эффекты, которые раньше требовали обязательного использования в изображениях скругленные углы, падающие тени, полупрозрачные фоны, градиенты и изображения в качестве рамок полей.

    2. Уникальные шрифты. Правило font-face позволяет создать ссылку на файл шрифта на сервере и использовать его для отображения текста на странице. Это позволяет не ограничиваться шрифтами, доступными на компьютере пользователей, и значительно упрощает красивое оформление текста.

    3. Переходы. Переходы CSS3 представляют собой простейший тип анимации, меняющий стиль элемента. Например, это может быть плавное изменение цвета кнопки в момент, когда над ней оказывается указатель мыши. Причем для этого не требуется ни Flash, ни JavaScript.

    4. Мощные селекторы. Спецификации CSS3 включают множество новых селекторов, в основном относящихся к псевдо-классам и атрибутам. Они позволяют обращаться к определенным фрагментам HTML-кода, не добавляя идентификаторы или классы, что упрощает код и защищает его от ошибок.

    5. Трансформации полей. Еще одна категория визуальных эффектов, ставших возможными с появлением CSS3. С ее помощью можно управлять положением и формой блока в двумерном и трехмерном пространствах — это поворот, масштабирование, наклон блока и т.д.

    Все это и многое другое вы узнаете и сможете применять на своих веб-сайтах, пройдя курс по CSS 3.


    Бонус 2. Уроки по работе в программе Dreamweaver
    Web-страницы можно создавать в любом текстовом редакторе. Даже обычного блокнота будет достаточно для создания web-страницы.

    Но есть программы, которые созданы специально, чтобы облегчить жизнь разработчику. Это программы, которые ускоряют и автоматизируют процесс создания web-страниц.

    Одна из них — программа для создания web-страницDreamweaver. Она дает массу возможностей для ускорения и упрощения процесса создания сайтов. Обладает гибким и легко настраиваемым под себя окном разработчика.
    Вы без труда сможете пользоваться программой, что ускорит процесс создания и наполнения web-страниц.
    Вы сможете настроить или создать свое собственное окно разработчика, что обеспечит максимально удобное использование программы.
    В уроках рассмотрены все панели инструментов, которые предоставляет программа
    Плюс к этому, показано, как создать свою панель инструментов, удобную специально для вас. Здесь также рассмотрены спорные возможности работы программы и последствия, к которым они могут привести.

    Бонус 3. Сборник полезных инструментов веб-разработчика
    Если к первой группе можно отнести специализированные для web редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.

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

    Они достаточно просты и удобны в использовании. Поскольку они установлены в сам браузер, то позволяют анализировать, тестировать, исправлять текущую загруженную страницу и сразу же видеть результат изменений на этой же страницы.
    Вы сможете всевозможными методами протестировать страницу.
    Сможете быстро вносить изменения в код и тут же видеть результат.
    Освоите инструмент, который позволяет быстро находить и исправлять ошибки. С помощью инструментов вы сможете переделывать целые куски кода прямо из браузера, анализировать и оценивать оптимизацию страницы и многое-многое другое.


     
    Последнее редактирование модератором: 7 июл 2019
    Malefisenta, 25 мар 2014
  2. adsl3008
    adsl3008 Складчик
    Ребят, вышел офигенный курс, от друга "WebForMySelf" вступайте!
     
    adsl3008, 27 июн 2019
Участники складчины [WebForMySelf] Практика верстки под мобильные устройства смогут написать отзыв
Наверх