Application Developer Day Conf 2011 Andrey Rebrov
-
Upload
andrey-rebrov -
Category
Technology
-
view
1.553 -
download
2
description
Transcript of Application Developer Day Conf 2011 Andrey Rebrov
![Page 1: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/1.jpg)
Мобильная веб разработка
Ребров Андрей
Luxoft Professional
![Page 2: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/2.jpg)
Когда телефоны были большими…
Сайты для них были:• унылые;• нефункциональные;• только WAP…
… или их вообще не было.
Хотя кто-то ставил Opera Mini и радовался жизни =)
![Page 3: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/3.jpg)
Время шло и теперь…Различных мобильных устройств стало много..
… и даже слишком.
![Page 4: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/4.jpg)
Так что имеем сейчас
• Полноценный компьютер в кармане• Малый размер экрана• Полноценный интернет (Wi-Fi)• Ряд ограничений (Flash, цена интернета)• Геолокация и прочие встроенные модули
![Page 5: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/5.jpg)
Что изменилось еще
• Новые возможности в создании сайтов• Постепенный уход от десктопных
приложений• Выросла скорость интернета
![Page 6: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/6.jpg)
А это значит…
Вы все еще не пишите под мобильные устройства?
Тогда мы идем к вам!
![Page 7: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/7.jpg)
Способы
• HTML+JS+CSS• Использовать фреймворк
![Page 8: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/8.jpg)
HTML+JS+CSS
• Разные платформы• Разные экраны
Где то это уже было, да?
Но разбираться как это работает нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript» http://ofps.oreilly.com/titles/9780596805784/
![Page 9: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/9.jpg)
Будь проще и люди к тебе потянуться
Преимущество фреймворков:– Решается проблема кроссплатформенности– Решается проблема разных экранов– Готовые решения для native-like поведения
![Page 10: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/10.jpg)
Многообразие выбора
• jQTouch• jQueryMobile• Sencha Touch• XUI• …..
![Page 11: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/11.jpg)
jQTouch
• Первый серьезный мобильный фреймворк• Многое подарил jQuery Mobile и Sencha
Touch• Созданы native эффекты переходов между
экранами• Первый блин немножко комом
http://www.jqtouch.com/
![Page 12: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/12.jpg)
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 13: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/13.jpg)
jQuery Mobile
• Построен на jQuery• Поддержка всех платформ• Удобная работа с событиями• Поддержка HTML5• Удобная работа с темами
http://jquerymobile.com/
![Page 14: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/14.jpg)
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 15: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/15.jpg)
Sencha Touch
• Быстрое создание сложного интерфейса• Простота в создание своих компонент• Удобная работа с данными• Проблема с производительностью
http://www.sencha.com/products/touch/
![Page 16: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/16.jpg)
Sencha Touchvar 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 17: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/17.jpg)
XUI
• Очень минималистичный• Отдельные сборки под платформы• Поддержка HTML
http://xuijs.com/
![Page 18: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/18.jpg)
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 19: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/19.jpg)
Что еще?
• Wink toolkit• iUI• Dojo Mobile• DHTMLX Touch
+ Спойлер
![Page 20: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/20.jpg)
Делаем нативным
• PhoneGap
• MotherApp
• Big5
• Rhodes
![Page 21: Application Developer Day Conf 2011 Andrey Rebrov](https://reader034.fdocuments.in/reader034/viewer/2022051514/5495bd0dac79592f2e8b4f1b/html5/thumbnails/21.jpg)
Что почитать
• Курс лекций и материалов по мобильной веб-разработке и дизайну
http://goo.gl/hLJv1
• Comparing Mobile Web Frameworks
http://goo.gl/L8Yh5
• Сравнение фреймворков для создания native приложений
http://goo.gl/rNb4t