Создание сайтов
<<  Создание сайтов в Quanta Plus Разработка корпоративных сайтов  >>
Особенности разработки мобильных сайтов
Особенности разработки мобильных сайтов
Основная идея Bitrix Mobile 2.0
Основная идея Bitrix Mobile 2.0
Платформы iOS 5.1+ и Android 2.3+
Платформы iOS 5.1+ и Android 2.3+
Мобильный сайт в рамках CMS
Мобильный сайт в рамках CMS
Особенности верстки Понятие Viewport’а
Особенности верстки Понятие Viewport’а
Особенности верстки Понятие Viewport’а
Особенности верстки Понятие Viewport’а
Особенности верстки Понятие Viewport’а
Особенности верстки Понятие Viewport’а
Альбомная и портретная ориентации
Альбомная и портретная ориентации
Альбомная и портретная ориентации
Альбомная и портретная ориентации
Особенности верстки Работа с формами
Особенности верстки Работа с формами
Особенности верстки Запуск внешних программ
Особенности верстки Запуск внешних программ
Особенности верстки Полезные CSS-свойства
Особенности верстки Полезные CSS-свойства
Ipad и разные разрешения
Ipad и разные разрешения
Особенности Javascript
Особенности Javascript
Верстка под Android
Верстка под Android
Retina Display
Retina Display
Retina Display Оптимизация графики
Retina Display Оптимизация графики
Retina Display Оптимизация графики
Retina Display Оптимизация графики
Адаптивная верстка Media Queries
Адаптивная верстка Media Queries
Адаптивная верстка Media Queries
Адаптивная верстка Media Queries
Отладка
Отладка
Полезные ресурсы
Полезные ресурсы
Заключение
Заключение
Спасибо за внимание
Спасибо за внимание

Презентация: «Особенности разработки мобильных сайтов». Автор: Grikhina. Файл: «Особенности разработки мобильных сайтов.pptx». Размер zip-архива: 1743 КБ.

Особенности разработки мобильных сайтов

содержание презентации «Особенности разработки мобильных сайтов.pptx»
СлайдТекст
1 Особенности разработки мобильных сайтов

Особенности разработки мобильных сайтов

Антон Герасимюк Ведущий разработчик Битрикс

2 Основная идея Bitrix Mobile 2.0

Основная идея Bitrix Mobile 2.0

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

3 Платформы iOS 5.1+ и Android 2.3+

Платформы iOS 5.1+ и Android 2.3+

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

4 Мобильный сайт в рамках CMS

Мобильный сайт в рамках CMS

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

5 Особенности верстки Понятие Viewport’а

Особенности верстки Понятие Viewport’а

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

6 Особенности верстки Понятие Viewport’а

Особенности верстки Понятие Viewport’а

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

7 Особенности верстки Понятие Viewport’а

Особенности верстки Понятие 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 Особенности верстки Работа с формами

Особенности верстки Работа с формами

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

11 Особенности верстки Запуск внешних программ

Особенности верстки Запуск внешних программ

Поддержка протоколов tel:, mailto:, sms:, skype:

12 Особенности верстки Полезные CSS-свойства

Особенности верстки Полезные CSS-свойства

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

13 Ipad и разные разрешения

Ipad и разные разрешения

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

14 Особенности Javascript

Особенности Javascript

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

15 Верстка под Android

Верстка под Android

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

16 Retina Display

Retina Display

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

17 Retina Display Оптимизация графики

Retina Display Оптимизация графики

Сложный путь: два комплекта графики

18 Retina Display Оптимизация графики

Retina Display Оптимизация графики

Простой путь: один комплект графики под Retina

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

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

Другой подход к созданию мобильного сайта: media queries

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

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

Media queries в CSS

21 Отладка

Отладка

iOS 6.0+ WebInpector Safari 6.0 Android WebInspector Chrome + Android SDK Универсально Weinre – Web Inspector Remote Используется в онлайн-сервисе http://debug.phonegap.com/

22 Полезные ресурсы

Полезные ресурсы

Safari Web Content Guide iOS Human Interface Guidelines Android Web Apps Guide Видео-доклад про Retina-дисплеи http://events.yandex.ru/talks/363/

23 Заключение

Заключение

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

24 Спасибо за внимание

Спасибо за внимание

Вопросы?

Антон Герасимюк e-mail: co@bitrix.ru twitter: @compote

«Особенности разработки мобильных сайтов»
http://900igr.net/prezentacija/informatika/osobennosti-razrabotki-mobilnykh-sajtov-252117.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Создание сайтов > Особенности разработки мобильных сайтов