Презентация компании Falcon. Создание сайтов и разработка мобильных приложений.
Особенности разработки мобильных сайтов
description
Transcript of Особенности разработки мобильных сайтов
Особенности разработки мобильных сайтов
Антон ГерасимюкВедущий разработчик
Битрикс
Основная идея Bitrix Mobile 2.0
• Разработка под iOS и Android: дорого, сложно и долго• Зато мы умеем хорошо делать сайты• Выход: гибридное приложение• Front-end – Bitrix Mobile• Back-end – мобильный сайт
Платформы iOS 5.1+ и Android 2.3+
• Полноценный браузер c поддержкой HTML5 и CSS3• Мечта верстальщика – один браузер WebKit• Небольшая ложка дегтя: популярность Android 2.3
Мобильный сайт в рамках CMS
• Создаем новый шаблон сайта с подключением Bitrix Mobile• Создаем шаблоны компонентов• Настраиваем шаблон сайта на отдельную директорию
(например, /mobile/)
Особенности версткиПонятие Viewport’а
• По умолчанию, мобильный браузер отобразит страницу так же, как браузер на desktop-экране шириной 980 (800) пикселов
• Затем страница масштабируется так, чтобы она умещалось на экране
Особенности версткиПонятие Viewport’а
• Специальный мета-тег viewport позволяет указать, как браузер должен масштабировать страницу
Особенности версткиПонятие Viewport’а• Атрибут viewport может содержать множественные
значения, разделенные запятой:• initial-scale – коэффициент масштабирования, в котором
пользователь изначально видит страницу• maximum-scale/minimum-scale – макс./мин. коэф-т
масштабирования, до которого пользователь может увеличить/уменьшать страницу
• user-scalable – может ли пользователь сам масштабировать страницу
• width/height - ширина/высота viewport’а (окна браузера)
Альбомная и портретная ориентации
• content="width=device-width"илиcontent="width=320"
Альбомная и портретная ориентации
• content="initial-scale=1.0"при условии
• html {-webkit-text-size-adjust:none}
Особенности версткиРабота с формами• Можно использовать следующие типы
тега <input type=“тип”>• date/datetime• time• email• month• number• telephone• url• Range
• В iOS полная поддержка, в Android частичная (зависит от версии ОС и прошивки производителя)
• Кроссплатформенно: использовать API Bitrix Mobile
Особенности версткиЗапуск внешних программ
• Поддержка протоколов tel:, mailto:, sms:, skype:
Особенности версткиПолезные CSS-свойства
• Градиенты:• -webkit-linear-gradient, -webkit-radial-gradient
• Тени: • text-shadow, box-shadow
• CSS-трансформации • -webkit-transform
• border-image – создание рамки вокруг элемента с помощью 9-grid картинки
• background-size – растягивание фона
• Главное не переборщить!
iPad и разные разрешения
• Сложный путь: отдельные шаблоны для разных разрешений экранов
• Простой путь: увеличение масштаба через мета-тег viewport, шлифовка через media queries
• Bitrix Mobile приложение будет передавать на сервер:• Размеры экрана• Retina/Non-retina• Версия ОС• Версия приложения• Pixel Ratio• и др.
Особенности Javascript
• В iOS выполнение ограничено 10 секундами• В iOS событие onscroll срабатывает только после того, как
закончилось скроллирование и пользователь отпустил палец• Нативная поддержка alert(), confirm(), prompt()
• Обработка касаний• ontouchstart, ontouchmove, ontouchend, ontouchcancel
• Жесты (масштабирование и поворот)• gesturestart, gestureend, gesturechange
• Смена ориентацииwindow.onorientationchange = function(){
alert(window.orientation); }
Верстка под Android
• Обводка текстовых полей зеленым или оранжевым бордюром не отключается
• Увеличение текстовых полей по высоте не отключается • Особенности старых версий Android (2.3)• Градиенты через -webkit-gradient• Тени через -webkit-box-shadow • нельзя использовать multiple background (в айфоне
можно) • для border-image по возможности использовать stretch
вместо repeat • перед свойством box-sizing добавляем -webkit-box-sizing
Retina Display
• Retina-дисплей – маркетинговый слоган компании Apple• Пиксельное соотношение (pixel ratio) – отношение
физического пикселя к виртуальному• iPhone’ы и iPad’ы имеют пиксельное соотношение 1.0 и 2.0 • Android от 1.5 до 2.25
Retina DisplayОптимизация графики
• Сложный путь: два комплекта графики
Retina DisplayОптимизация графики• Простой путь: один комплект графики под Retina
Адаптивная версткаMedia Queries
• Другой подход к созданию мобильного сайта: media queries
Адаптивная версткаMedia Queries
• Media Queries в CSS
Отладка
• iOS 6.0+• WebInpector Safari 6.0
• Android• WebInspector Chrome
+ Android SDK
• Универсально• Weinre – Web Inspector Remote• Используется в онлайн-сервисе http://
debug.phonegap.com/
Полезные ресурсы
• Safari Web Content Guide• iOS Human Interface Guidelines• Android Web Apps Guide• Видео-доклад про Retina-дисплеи
http://events.yandex.ru/talks/363/
Заключение
• Bitrix Mobile – новая платформа для разработки мобильных приложений
• Разработчик создает мобильный сайт, тестируя его через демо-приложение
• 1С-Битрикс компилирует приложение с нужными атрибутами бренда (название, иконки, логотип) и добавляет в AppStore и Google Play
• Клиент получает нативное приложение под iOS и Android для своего сайта
Спасибо за внимание! Вопросы?
Антон Герасимюкe-mail: [email protected]: @compote