четверг, 4 июня 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 1. Настройка окружения

Что такое Recponcive Design? Если говорить простым языком, это технология, позволяющая создавать сайты таким образом, чтобы они одинаково хорошо смотрелись как на огромном мониторе, так и на маленьком экране мобильного телефона.
В посте ниже представлен конспект курса на Responsive Web Design Fundamentals на Udacity, который представлен Pete LePage из Google и Cameron Pittman из Udacity (на картинке соответственно слева и справа).

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.
You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

Ниже конспект на русском языке.


Пример Responcive Design - Google News. У этого сайта есть полноотзывчивая (full-responcive) версия дизайна для мобильных устройств и отзывчивая для веба, начинающаяся с  минимальных размеров. Таким образом, сайт хорошо работает на всех устройствах, но такой подход добавляет дополнительный уровень сложности в создании и поддержке.

(по всей видимости, под full-responcive или adaptive подразумевается адаптивный дизайн, как это принято называть у нас, а просто responcive - отзывчивый. Вот цитата из Вики:
в отзывчивом дизайне[9]

  • применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
  • использование гибких изображений (англ. flexible images);
  • работа с медиа-запросами (англ. media queries);

в дополнение к этому в адаптивном дизайне

  • применение постепенного улучшения;
  • проектирование для мобильных устройств с самых ранних этапов[10]. - Lucia).

  Эмулятор Chrome

Открываем https://developers.google.com/web/fundamentals/ в браузере Chrome, открываем девелоперскую панель (Ctrl+Shift+J на Windows), затем нажимаем иконку эмулятора на верхней панели, похожую на телефончик. Лучше переключить Developer Tools в положение вертикально справа, как здесь, т.к. большинство телефонов имеют вертикальную (portrait) ориентацию и таким образом мы получаем больше вертикального пространства. Для этого надо щелкнуть по второй справа кнопке на верхней панели.

 Выбрать девайс - из селекта вверху.

Эмуляция кастомного устройства

Жмем Esc, чтобы вывести панельку.

Как тестировать на реальных девайсах (на примере Android, по-моему там Samsung GS4 в видео)

(Тут я буду позволять себе некоторую отсебятину, так как в тестировании на мобильных имею некоторый опыт. - Lucia).

1. Открываем Developer Tools, в большинстве случаев надо зайти в Settings > About Device и несколько раз нажать на Build Number (если не получается, надо погуглить How to open developer tools in <your_device_model>).
2. Разрешить USB Debugging (Developer Options (пункт в меню появится после предыдущего шага) > Enable USB debugging).
3. Установить инструменты. На компьютере - Chrome Canary (он работает отдельно от обычного , на мобильнике - Chrome Beta.
4. Открываем на компьютере chrome://inspect, предварительно подключив телефон к компьютеру с помощью кабеля. В окне должен отобразиться Ваш телефон. Если не отображается, можно установить дрова вот отсюда.
 В окне мы видим вкладки, открытые в данный момент в браузере Chrome на телефоне. Например, у меня открыта картинка с котиком.
5. Нажав ссылку Inspect под табиком, мы можем видеть исходный код страницы, открытой на телефоне, анализировать его, а также наблюдать саму страницу так, как она выглядит на телефоне.
Можно кликать на ссылки или кнопки на компьютере и они будут отображаться на телефоне; и наоборот.
По этой ссылке описано, как проделывать аналогичные операции с iPhone и MacOS, соответственно. 


Комментариев нет:

Отправка комментария