'

Мобильная веб-разработка

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Обо мне Luxoft, 10 ЦСР Разработка мобильных приложений в следующих сферах: логистика;  перевозка пациентов; поиск лекарств; крупный сотовый оператор. Блог: http://andrebrov.net Твиттер: @andrebrov Почта: ARebrov@luxoft.com


Слайд 2

О семинаре 1. Почему стоит выбирать мобильный веб. 2. Как разрабатывать.


Слайд 3

Решает ли мобильный веб все проблемы?


Слайд 4

Решает ли мобильный веб все проблемы? НЕТ!


Слайд 5

Но на него стоит переходить уже сейчас?


Слайд 6

ДА! Но на него стоит переходить уже сейчас?


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

Осталось сделать выбор


Слайд 12

Разрушим ряд мифов!


Слайд 13

Нативные приложения имеют больший функционал


Слайд 14

Нативные приложения имеют больший функционал Myth busted Геолокация Работа с файловой системой Доступ к акселерометру и гироскопу Работа с touch-событиями


Слайд 15

Нативные приложения имеют большую производительность Аппаратное ускорение Мультипоточность


Слайд 16

Нативные приложения имеют большую производительность Myth busted http://stevesouders.com/mobileperf/


Слайд 17

Нативные приложения проще разрабатывать


Слайд 18

Нативные приложения проще разрабатывать Myth busted HTML CSS JS


Слайд 19

Нативные приложения проще сделать с использованием родных стилей


Слайд 20

Нативные приложения проще сделать с использованием родных стилей Myth busted Sencha Touch jQTouch jQuery Mobile …


Слайд 21

Нативные приложения проще найти (и купить) Apple Store Android market ...


Слайд 22

Нативные приложения проще найти (и купить) Myth busted


Слайд 23

Нативные приложения проще монетизировать Единичная продажа


Слайд 24

Нативные приложения проще монетизировать Myth busted ?Pay-per-use Advertise SaaS


Слайд 25

Рынок мобильных приложений


Слайд 26

PC vs Mobile


Слайд 27

Мобильный интернет все более популярен


Слайд 28

Конец первой части


Слайд 29

Время разработки


Слайд 30

Итак... Вы все еще не пишите под мобильные устройства? Тогда мы идем к вам!


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

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


Слайд 36

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>


Слайд 37

jQuery Mobile Построен на jQuery Поддержка всех платформ Удобная работа с событиями Поддержка HTML5 Удобная работа с темами http://jquerymobile.com/


Слайд 38

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>


Слайд 39

Sencha Touch Быстрое создание сложного интерфейса Простота в создание своих компонент Удобная работа с данными Проблема с производительностью http://www.sencha.com/products/touch/


Слайд 40

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>'     ]   });


Слайд 41

XUI Очень минималистичный Отдельные сборки под платформы Поддержка HTML http://xuijs.com/


Слайд 42

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>');


Слайд 43

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


Слайд 44

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


Слайд 45

Что почитать Курс лекций и материалов по мобильной веб-разработке и дизайну http://goo.gl/hLJv1 Comparing Mobile Web Frameworks http://goo.gl/L8Yh5 Сравнение фреймворков для создания native приложений http://goo.gl/rNb4t


Слайд 46

Вопросы? Ребров Андрей Luxoft Professional ARebrov@luxoft.com twitter.com/andrebrov http://andrebrov.net


×

HTML:





Ссылка: