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

Февраль 13, 2021

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

Содержание

2. Когда телефоны были большими… Сайты для них были: унылые; нефункциональные; только WAP… … или их вообще
3. Время шло и теперь… Различных мобильных устройств стало много.. … и даже слишком.
4. Так что имеем сейчас Полноценный компьютер в кармане Малый размер экрана Полноценный интернет (Wi-Fi) Ряд ограничений
5. Что изменилось еще Новые возможности в создании сайтов Постепенный уход от десктопных приложений Выросла скорость интернета
6. А это значит… Вы все еще не пишите под мобильные устройства? Тогда мы идем к вам!
7. Способы HTML+JS+CSS Использовать фреймворк
8. HTML+JS+CSS Разные платформы Разные экраны Где то это уже было, да? Но разбираться как это работает
9. Будь проще и люди к тебе потянуться Преимущество фреймворков: Решается проблема кроссплатформенности Решается проблема разных экранов
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: [ '
17. XUI Очень минималистичный Отдельные сборки под платформы Поддержка HTML http://xuijs.com/
18. XUI x$('#foo').html(' sweet as honey '); x$('#foo').outer(' free as a bird '); x$('#foo').top(' top of the
19. Что еще? Wink toolkit iUI Dojo Mobile DHTMLX Touch + Спойлер
20. Делаем нативным PhoneGap MotherApp Big5 Rhodes
21. Что почитать Курс лекций и материалов по мобильной веб-разработке и дизайну http://goo.gl/hLJv1 Comparing Mobile Web Frameworks
23. Скачать презентацию

Слайд 2

Когда телефоны были большими…
Сайты для них были:
унылые;
нефункциональные;
только WAP…
… или их вообще не

Когда телефоны были большими… Сайты для них были: унылые; нефункциональные; только WAP…

было.

Хотя кто-то ставил Opera Mini и радовался жизни =)

Слайд 3

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

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

Слайд 4

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

Так что имеем сейчас Полноценный компьютер в кармане Малый размер экрана Полноценный

(Flash, цена интернета)
Геолокация и прочие встроенные модули

Слайд 5

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

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

интернета

Слайд 6

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

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

к вам!

Слайд 7

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

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

Слайд 8

HTML+JS+CSS
Разные платформы
Разные экраны
Где то это уже было, да?
Но разбираться как это работает

HTML+JS+CSS Разные платформы Разные экраны Где то это уже было, да? Но

нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript» http://ofps.oreilly.com/titles/9780596805784/

Слайд 9

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

Будь проще и люди к тебе потянуться Преимущество фреймворков: Решается проблема кроссплатформенности

экранов
Готовые решения для native-like поведения

Слайд 10

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

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

Слайд 11

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

jQTouch Первый серьезный мобильный фреймворк Многое подарил jQuery Mobile и Sencha Touch

переходов между экранами
Первый блин немножко комом

http://www.jqtouch.com/

Слайд 12

jQTouch

jQTouch
        About

User Interface
4

Text

jQTouch jQTouch About User Interface 4 Text

Слайд 13

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

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

темами

http://jquerymobile.com/

Слайд 14

jQuery Mobile
         Text Input:
        Textarea:

jQuery Mobile Text Input: Textarea:

Слайд 15

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

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

с производительностью

http://www.sencha.com/products/touch/

Слайд 16

Sencha Touch
var timeline = new Ext.Component({ title: 'Timeline',
    tls: 'timeline', scroll: 'vertical',
    tpl: [      '',       '
',        '
',
'

Sencha Touch var timeline = new Ext.Component({ title: 'Timeline', tls: 'timeline', scroll:

src="{profile_image_url}"/>',
'

', '

', '

{from_user}

', '

{text}

', '

', '

', '' ] });

Слайд 17

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

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

Слайд 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

XUI x$('#foo').html(' sweet as honey '); x$('#foo').outer(' free as a bird ');

barrel'); x$('#foo').before('

first in line

'); x$('#foo').after('better late than never');

Слайд 19

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

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

Слайд 20

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

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

Слайд 21

Что почитать
Курс лекций и материалов по мобильной веб-разработке и дизайну
http://goo.gl/hLJv1
Comparing Mobile

Что почитать Курс лекций и материалов по мобильной веб-разработке и дизайну http://goo.gl/hLJv1

Web Frameworks
http://goo.gl/L8Yh5
Сравнение фреймворков для создания native приложений
http://goo.gl/rNb4t