(ПОВТОР) Создание адаптивного веб-сайта для разных экранов — Lynda.com [RUS]

Создание адаптивного веб-сайта для разных экранов
(Creating an Adaptive Web Site for Multiple Screens)
Lynda.com [RUS]
​

Автор: Ray Villalobos
Переводчик: Силя Сильхи
Продолжительность: 3:09 ч

В этом курсе показано, как построить веб-сайт, который автоматически адаптирует свой макет под различные размеры экранов, ориентации, и разрешения. Рэй Виллалобос показывает, как дизайнеры и разработчики могут создать один документ HTML и изменить его отображение в десктопных браузерах и мобильных устройствах, наподобие iPhone, смартфонов Android, и планшетов. Курс охватывает создание базовой структуры HTML5, использование шаблонов сброса (reset), и стилизацию сайта с помощью CSS.
​

Темы:

• Настройка тестового сервера и эмуляторов
• Создание и настройка шаблона сайта
• Использование бесплатных шрифтов Google
• Подготовка графики
• Создание файлов стилей
• Загрузка внешних страниц при помощи AJAX
• Создание мобильных вкладок
• Определение мобильных устройств
• Использование JavaScript для решения проблем скроллинга и изменения ориентации
• Тестирование и отладка кода сайта

Спойлер: Содержание

• 0. Вступление 3m 33s
  • Приветствие 53s
  • Использование файлов упражнений 2m 11s
  • Использование файла с заготовками кода 29s
• 1. Подготовка 27m 50s
  • Установка локального сервера на Mac 3m 24s
  • Установка локального сервера на Windows 5m 44s
  • Установка симулятора iPhone 2m 21s
  • Установка эмулятора Android на Mac 3m 45s
  • Установка эмулятора Android на Windows 5m 48s
  • Работа с удалённым сервером 2m 26s
  • Тестирование на настоящих устройствах 1m 28s
  • Тур по завершённому проекту 2m 54s
• 2. Подходы к созданию дизайна для разных экранов 8m 34s
  • Понимание подходов к созданию дизайна 3m 1s
  • Создание дизайна для мобильных устройств 2m 22s
  • Работа с адаптивным дизайном 3m 11s
• 3. Создание и настройка шаблонов сайта 13m 44s
  • Шаблон сброса HTML5 2m 39s
  • Настройка шаблона HTML 4m 32s
  • Использование бесплатных веб-шрифтов Google 2m 10s
  • Модифицирование оставшейся части шаблона 2m 28s
  • Подготовка графики для веб-сайта 1m 55s
• 4. Создание адаптивного сайта 13m 57s
  • Создание шаблона страницы 3m 23s
  • Создание страницы меню ресторана 5m 8s
  • Разработка страницы "about us" 1m 14s
  • Отображение карты Google на странице 4m 12s
• 5. Создание стилей для настольных компьютеров 32m 54s
  • Создание файла стилей 3m 22s
  • Построение стилей для секции body и хедера 5m 37s
  • Настройка стилей футера 2m 24s
  • Составление меню 10m 21s
  • Стилизация страницы "about us" 3m 5s
  • Стилизация страницы с картой 1m 24s
  • Настройка дополнительных элементов 6m 41s
• 6. Добавление интерактивности для десктопных мониторов 25m 29s
  • Загрузка внешних страниц с помощью AJAX 12m 40s
  • Отображение слоя с фото высокого разрешения 12m 49s
• 7. Стилизация страниц для экранов смартфонов 23m 58s
  • Сброс и скрытие элементов 4m 56s
  • Создание кнопок меню в футере для смартфонов 6m 14s
  • Модифицирование списка меню 3m 33s
  • Создание мобильных вкладок 5m 17s
  • Модифицирование остальных страниц для мобильного макета 3m 58s
• 8. Добавление интерактивности JavaScript для мобильных устройств 23m 43s
  • Работоспособность вкладок 4m 2s
  • Определение мобильного устройства клиента 6m 58s
  • Правильное отображение элементов с фиксированным позиционированием в мобильных браузерах 8m 6s
  • Центрирование изображений 2m 2s
  • Возможность изменения ориентации 2m 35s
• 9. Стилизация страниц для планшетов 7m 3s
  • Изменение кода CSS страницы меню на планшетах 5m 22s
  • Изменение CSS для правильного отображения остальных страниц на планшете 1m 41s
• 10. Исправление проблем 6m 25s
  • Тестирование и отладка 6m 25s
• 11. Заключение 2m 20s
  • Следующие шаги 2m 20s

Стоимость перевода: 3 500 рублей