Mobile web development
-
Upload
andrey-rebrov -
Category
Technology
-
view
1.694 -
download
1
description
Transcript of Mobile web development
![Page 1: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/1.jpg)
Мобильная веб-разработка
Ребров Андрей
![Page 2: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/2.jpg)
2
Обо мне
Luxoft, 10 ЦСР
Разработка мобильных приложений в следующих сферах:• логистика; • перевозка пациентов;• поиск лекарств;• крупный сотовый оператор.
Блог: http://andrebrov.netТвиттер: @andrebrovПочта: [email protected]
![Page 3: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/3.jpg)
3
О семинаре
1. Почему стоит выбирать мобильный веб.
2. Как разрабатывать.
![Page 4: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/4.jpg)
4
Решает ли мобильный веб все проблемы?
![Page 5: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/5.jpg)
5
Решает ли мобильный веб все проблемы?
НЕТ!
![Page 6: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/6.jpg)
6
Но на него стоит переходить уже сейчас?
![Page 7: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/7.jpg)
7
ДА!
Но на него стоит переходить уже сейчас?
![Page 8: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/8.jpg)
8
Когда телефоны были большими…
Сайты для них были:o унылые;o нефункциональные;o только WAP…
… или их вообще не было.
Хотя кто-то ставил Opera Mini и радовался жизни =)
![Page 9: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/9.jpg)
9
Время шло и теперь… Различных мобильных устройств стало много..
… и даже слишком.
![Page 10: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/10.jpg)
10
Так что имеем сейчас
• Полноценный компьютер в кармане• Малый размер экрана• Полноценный интернет (Wi-Fi)• Ряд ограничений (Flash, цена
интернета)• Геолокация и прочие встроенные
модули
![Page 11: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/11.jpg)
11
Что изменилось еще
• Новые возможности в создании сайтов• Постепенный уход от десктопных
приложений• Выросла скорость интернета
![Page 12: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/12.jpg)
12
Осталось сделать выбор
![Page 13: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/13.jpg)
13
Разрушим ряд мифов!
![Page 14: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/14.jpg)
14
Нативные приложения имеют больший функционал
![Page 15: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/15.jpg)
15
Нативные приложения имеют больший функционал Myth busted
• Геолокация• Работа с файловой системой• Доступ к акселерометру и гироскопу• Работа с touch-событиями
![Page 16: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/16.jpg)
16
Нативные приложения имеют большую производительность
• Аппаратное ускорение
• Мультипоточность
![Page 17: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/17.jpg)
17
Нативные приложения имеют большую производительность Myth busted
http://stevesouders.com/mobileperf/
![Page 18: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/18.jpg)
18
Нативные приложения проще разрабатывать
![Page 19: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/19.jpg)
19
Нативные приложения проще разрабатывать Myth busted
• HTML• CSS• JS
![Page 20: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/20.jpg)
20
Нативные приложения проще сделать с использованием родных стилей
![Page 21: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/21.jpg)
21
Нативные приложения проще сделать с использованием родных стилей Myth busted
• Sencha Touch• jQTouch• jQuery Mobile• …
![Page 22: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/22.jpg)
22
Нативные приложения проще найти (и купить)
• Apple Store
• Android market
• ...
![Page 23: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/23.jpg)
23
Нативные приложения проще найти (и купить) Myth busted
![Page 24: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/24.jpg)
24
Нативные приложения проще монетизировать
Единичная продажа
![Page 25: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/25.jpg)
25
Нативные приложения проще монетизировать Myth busted
• Pay-per-use
• Advertise
• SaaS
![Page 26: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/26.jpg)
26
Рынок мобильных приложений
![Page 27: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/27.jpg)
27
PC vs Mobile
![Page 28: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/28.jpg)
28
Мобильный интернет все более популярен
![Page 29: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/29.jpg)
29
Конец первой части
![Page 30: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/30.jpg)
30
Время разработки
![Page 31: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/31.jpg)
31
Итак...
Вы все еще не пишите под мобильные устройства?
Тогда мы идем к вам!
![Page 32: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/32.jpg)
32
Способы
• HTML+JS+CSS• Использовать фреймворк
![Page 33: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/33.jpg)
33
HTML+JS+CSS
• Разные платформы• Разные экраны
Где то это уже было, да?
Но разбираться как это работает нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript» http://ofps.oreilly.com/titles/9780596805784/
![Page 34: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/34.jpg)
34
Будь проще и люди к тебе потянуться
Преимущество фреймворков:• Решается проблема кроссплатформенности• Решается проблема разных экранов• Готовые решения для native-like поведения
![Page 35: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/35.jpg)
35
Многообразие выбора• jQTouch• jQueryMobile• Sencha Touch• XUI• …..
![Page 36: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/36.jpg)
36
jQTouch
• Первый серьезный мобильный фреймворк
• Многое подарил jQuery Mobile и Sencha Touch
• Созданы native эффекты переходов между экранами
• Первый блин немножко комом
http://www.jqtouch.com/
![Page 37: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/37.jpg)
37
jQTouch <div id="home" class="current">
<div class="toolbar"> <h1>jQTouch</h1> <a class="button slideup" id="infoButton" href="#about">About</a> </div> <ul class="rounded"> <li class="arrow">
<a href="#ui">User Interface</a> <small class="counter">4</small> </li>
</ul> <div class="info"> <p>Text</p> </div> </div>
![Page 38: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/38.jpg)
38
jQuery Mobile
• Построен на jQuery• Поддержка всех платформ• Удобная работа с событиями• Поддержка HTML5• Удобная работа с темами
http://jquerymobile.com/
![Page 39: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/39.jpg)
39
jQuery Mobile <div data-role="content">
<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea">
</textarea> </div> </div>
![Page 40: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/40.jpg)
40
Sencha Touch
• Быстрое создание сложного интерфейса
• Простота в создание своих компонент• Удобная работа с данными• Проблема с производительностью
http://www.sencha.com/products/touch/
![Page 41: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/41.jpg)
41
Sencha Touch var timeline = new Ext.Component({
title: 'Timeline', tls: 'timeline',
scroll: 'vertical', tpl: [
'<tpl for=".">','<div class="tweet">','<div class="avatar">',
'<img src="{profile_image_url}"/>', '</div>',
'<div class="tweet-content">','<h2>{from_user}</h2>', '<p>{text}</p>', '</div>','</div>','</tpl>' ] });
![Page 42: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/42.jpg)
42
XUI
• Очень минималистичный• Отдельные сборки под платформы• Поддержка HTML
http://xuijs.com/
![Page 43: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/43.jpg)
43
XUI x$('#foo').html('<p>sweet as honey</p>');
x$('#foo').outer('<p>free as a bird</p>');x$('#foo').top('<b>top of the pops</b>');x$('#foo').bottom('<span>bottom of the barrel</span>');x$('#foo').before('<pre>first in line</pre>');x$('#foo').after('<marquee>better late than never</marquee>');
![Page 44: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/44.jpg)
44
Что еще?
• Wink toolkit• iUI• Dojo Mobile• DHTMLX Touch
+ Спойлер
![Page 45: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/45.jpg)
45
Делаем нативным
• PhoneGap• MotherApp• Big5• Rhodes
![Page 46: Mobile web development](https://reader038.fdocuments.in/reader038/viewer/2022110303/54b795e94a79591d4a8b46f3/html5/thumbnails/46.jpg)
46
Что почитать
• Курс лекций и материалов по мобильной веб-разработке и дизайну
http://goo.gl/hLJv1• Comparing Mobile Web Frameworks
http://goo.gl/L8Yh5• Сравнение фреймворков для создания native
приложений http://goo.gl/rNb4t