Особенности разработки мобильных сайтов Антон Герасимюк Ведущий разработчик Битрикс. - презентация

1 Особенности разработки мобильных сайтов Антон Герасимюк Ведущий разработчик Битрикс

2 Основная идея Bitrix Mobile 2.0 Разработка под iOS и Android: дорого, сложно и долго Зато мы умеем хорошо делать сайты Выход: гибридное приложение Front-end – Bitrix Mobile Back-end – мобильный сайт

3 Платформы iOS 5.1+ и Android 2.3+ Полноценный браузер c поддержкой HTML5 и CSS3 Мечта верстальщика – один браузер WebKit Небольшая ложка дегтя: популярность Android 2.3

4 Мобильный сайт в рамках CMS Создаем новый шаблон сайта с подключением Bitrix Mobile Создаем шаблоны компонентов Настраиваем шаблон сайта на отдельную директорию (например, /mobile/)

5 Особенности верстки Понятие Viewportа По умолчанию, мобильный браузер отобразит страницу так же, как браузер на desktop-экране шириной 980 (800) пикселов Затем страница масштабируется так, чтобы она умещалось на экране

6 Особенности верстки Понятие Viewportа Специальный мета-тег viewport позволяет указать, как браузер должен масштабировать страницу

7 Особенности верстки Понятие Viewportа Атрибут viewport может содержать множественные значения, разделенные запятой: initial-scale – коэффициент масштабирования, в котором пользователь изначально видит страницу maximum-scale/minimum-scale – макс./мин. коэф-т масштабирования, до которого пользователь может увеличить/уменьшать страницу user-scalable – может ли пользователь сам масштабировать страницу width/height - ширина/высота viewportа (окна браузера)

8 Альбомная и портретная ориентации content="width=device-width" или content="width=320"

9 Альбомная и портретная ориентации content="initial-scale=1.0" при условии html {-webkit-text-size-adjust:none}

10 Особенности верстки Работа с формами Можно использовать следующие типы тега date/datetime time month number telephone url Range В iOS полная поддержка, в Android частичная (зависит от версии ОС и прошивки производителя) Кроссплатформенно: использовать API Bitrix Mobile

11 Особенности верстки Запуск внешних программ Поддержка протоколов tel:, mailto:, sms:, skype:

12 Особенности верстки Полезные CSS-свойства Градиенты: -webkit-linear-gradient, -webkit-radial-gradient Тени: text-shadow, box-shadow CSS-трансформации -webkit-transform border-image – создание рамки вокруг элемента с помощью 9-grid картинки background-size – растягивание фона Главное не переборщить!

13 iPad и разные разрешения Сложный путь: отдельные шаблоны для разных разрешений экранов Простой путь: увеличение масштаба через мета-тег viewport, шлифовка через media queries Bitrix Mobile приложение будет передавать на сервер: Размеры экрана Retina/Non-retina Версия ОС Версия приложения Pixel Ratio и др.

14 Особенности Javascript В iOS выполнение ограничено 10 секундами В iOS событие onscroll срабатывает только после того, как закончилось скроллирование и пользователь отпустил палец Нативная поддержка alert(), confirm(), prompt() Обработка касаний ontouchstart, ontouchmove, ontouchend, ontouchcancel Жесты (масштабирование и поворот) gesturestart, gestureend, gesturechange Смена ориентации window.onorientationchange = function(){ alert(window.orientation); }

15 Верстка под Android Обводка текстовых полей зеленым или оранжевым бордюром не отключается Увеличение текстовых полей по высоте не отключается Особенности старых версий Android (2.3) Градиенты через -webkit-gradient Тени через -webkit-box-shadow нельзя использовать multiple background (в айфоне можно) для border-image по возможности использовать stretch вместо repeat перед свойством box-sizing добавляем -webkit-box-sizing

16 Retina Display Retina-дисплей – маркетинговый слоган компании Apple Пиксельное соотношение (pixel ratio) – отношение физического пикселя к виртуальному iPhoneы и iPadы имеют пиксельное соотношение 1.0 и 2.0 Android от 1.5 до 2.25

17 Retina Display Оптимизация графики Сложный путь: два комплекта графики

18 Retina Display Оптимизация графики Простой путь: один комплект графики под Retina

19 Адаптивная верстка Media Queries Другой подход к созданию мобильного сайта: media queries

20 Адаптивная верстка Media Queries Media Queries в CSS

21 Отладка iOS 6.0+ WebInpector Safari 6.0 Android WebInspector Chrome + Android SDK Универсально Weinre – Web Inspector Remote Используется в онлайн-сервисе

22 Полезные ресурсы Safari Web Content Guide iOS Human Interface Guidelines Android Web Apps Guide Видео-доклад про Retina-дисплеи

23 Заключение Bitrix Mobile – новая платформа для разработки мобильных приложений Разработчик создает мобильный сайт, тестируя его через демо-приложение 1С-Битрикс компилирует приложение с нужными атрибутами бренда (название, иконки, логотип) и добавляет в AppStore и Google Play Клиент получает нативное приложение под iOS и Android для своего сайта

24 Спасибо за внимание! Вопросы? Антон Герасимюк