Мобильная веб разработка Ребров Андрей Luxoft Professional. - презентация

1 Мобильная веб разработка Ребров Андрей Luxoft Professional

2 Когда телефоны были большими… Сайты для них были: унылые; нефункциональные; только WAP… … или их вообще не было. Хотя кто-то ставил Opera Mini и радовался жизни =)

3 Время шло и теперь… Различных мобильных устройств стало много.. … и даже слишком.

4 Так что имеем сейчас Полноценный компьютер в кармане Малый размер экрана Полноценный интернет (Wi-Fi) Ряд ограничений (Flash, цена интернета) Геолокация и прочие встроенные модули

5 Что изменилось еще Новые возможности в создании сайтов Постепенный уход от десктопных приложений Выросла скорость интернета

6 А это значит… Вы все еще не пишите под мобильные устройства? Тогда мы идем к вам!

7 Способы HTML+JS+CSS Использовать фреймворк

8 HTML+JS+CSS Разные платформы Разные экраны Где то это уже было, да? Но разбираться как это работает нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript»

9 Будь проще и люди к тебе потянуться Преимущество фреймворков: – Решается проблема кроссплатформенности – Решается проблема разных экранов – Готовые решения для native-like поведения

10 Многообразие выбора jQTouch jQueryMobile Sencha Touch XUI …..

11 jQTouch Первый серьезный мобильный фреймворк Многое подарил jQuery Mobile и Sencha Touch Созданы native эффекты переходов между экранами Первый блин немножко комом

12 jQTouch jQTouch About User Interface 4 Text

13 jQuery Mobile Построен на jQuery Поддержка всех платформ Удобная работа с событиями Поддержка HTML5 Удобная работа с темами

14 jQuery Mobile Text Input: Textarea:

15 Sencha Touch Быстрое создание сложного интерфейса Простота в создание своих компонент Удобная работа с данными Проблема с производительностью

16 Sencha Touch var timeline = new Ext.Component({ title: 'Timeline', tls: 'timeline', scroll: 'vertical', tpl: [ ' ', ' ', ' ', ' ', ' ', ' ', ' {from_user} ', ' {text} ', ' ', ' ', ' ' ] });

17 XUI Очень минималистичный Отдельные сборки под платформы Поддержка HTML

18 XUI x$('#foo').html(' sweet as honey '); x$('#foo').outer(' free as a bird '); x$('#foo').top(' top of the pops '); x$('#foo').bottom(' bottom of the barrel '); x$('#foo').before(' first in line '); x$('#foo').after(' better late than never ');

19 Что еще? Wink toolkit iUI Dojo Mobile DHTMLX Touch + Спойлер

20 Делаем нативным PhoneGap MotherApp Big5 Rhodes

21 Что почитать Курс лекций и материалов по мобильной веб- разработке и дизайну Comparing Mobile Web Frameworks Сравнение фреймворков для создания native приложений

22 Вопросы? Ребров Андрей Luxoft Professional twitter.com/andrebrov