0
Мобильная веб разработка Ребров Андрей Luxoft Professional
Когда телефоны были большими… <ul><li>Сайты для них были: </li></ul><ul><ul><ul><li>унылые; </li></ul></ul></ul><ul><ul><u...
Время шло и теперь… <ul><li>Различных мобильных устройств стало много.. </li></ul>…  и даже слишком.
Так что имеем сейчас <ul><li>Полноценный компьютер   в кармане </li></ul><ul><li>Малый размер экрана </li></ul><ul><li>Пол...
Что изменилось еще <ul><li>Новые возможности в создании сайтов </li></ul><ul><li>Постепенный уход от десктопных приложений...
А это значит… <ul><li>Вы все еще не пишите под мобильные устройства? </li></ul>Тогда мы идем к вам!
Способы <ul><li>HTML+JS+CSS </li></ul><ul><li>Использовать фреймворк </li></ul>
HTML+JS+CSS <ul><li>Разные платформы </li></ul><ul><li>Разные экраны </li></ul><ul><li>Где то это уже было, да? </li></ul>...
Будь проще и люди к тебе потянуться <ul><li>Преимущество фреймворков: </li></ul><ul><ul><li>Решается проблема кроссплатфор...
Многообразие выбора <ul><li>jQTouch </li></ul><ul><li>jQueryMobile </li></ul><ul><li>Sencha Touch </li></ul><ul><li>XUI </...
jQTouch <ul><li>Первый серьезный мобильный фреймворк </li></ul><ul><li>Многое подарил  jQuery Mobile  и  Sencha Touch </li...
jQTouch <ul><li>< div   id =&quot;home&quot;   class =&quot;current&quot;>          < div   class =&quot;toolbar&quot;>   ...
jQuery Mobile <ul><li>Построен на jQuery </li></ul><ul><li>Поддержка всех платформ </li></ul><ul><li>Удобная работа с собы...
jQuery Mobile <ul><li>< div   data-role =&quot;content&quot;>      < div   data-role =&quot;fieldcontain&quot;>         < ...
Sencha Touch <ul><li>Быстрое создание сложного интерфейса </li></ul><ul><li>Простота в создание своих компонент </li></ul>...
Sencha Touch <ul><li>var  timeline =  new  Ext.Component({ title:  'Timeline' ,  </li></ul><ul><li>     t ls:  'timeline' ...
XUI <ul><li>Очень минималистичный </li></ul><ul><li>Отдельные сборки под платформы </li></ul><ul><li>Поддержка  HTML </li>...
XUI <ul><li>x$( '#foo' ).html( '<p>sweet as honey</p>' ); x$( '#foo' ).outer( '<p>free as a bird</p>' ); x$( '#foo' ).top(...
Что еще? <ul><li>Wink toolkit </li></ul><ul><li>iUI </li></ul><ul><li>Dojo Mobile </li></ul><ul><li>DHTMLX Touch </li></ul...
Делаем нативным <ul><li>PhoneGap </li></ul><ul><li>MotherApp </li></ul><ul><li>Big5 </li></ul><ul><li>Rhodes </li></ul>
Что почитать <ul><li>Курс лекций и материалов по мобильной веб-разработке и дизайну </li></ul><ul><li>http://goo.gl/hLJv1 ...
Вопросы? <ul><li>Ребров Андрей </li></ul><ul><li>Luxoft Professional </li></ul><ul><li>[email_address] </li></ul><ul><li>t...
Upcoming SlideShare
Loading in...5
×

Application Developer Day Conf 2011 Andrey Rebrov

1,625

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,625
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Application Developer Day Conf 2011 Andrey Rebrov"

  1. 1. Мобильная веб разработка Ребров Андрей Luxoft Professional
  2. 2. Когда телефоны были большими… <ul><li>Сайты для них были: </li></ul><ul><ul><ul><li>унылые; </li></ul></ul></ul><ul><ul><ul><li>нефункциональные; </li></ul></ul></ul><ul><ul><ul><li>только WAP … </li></ul></ul></ul><ul><ul><ul><li>… или их вообще не было. </li></ul></ul></ul>Хотя кто-то ставил Opera Mini и радовался жизни =)
  3. 3. Время шло и теперь… <ul><li>Различных мобильных устройств стало много.. </li></ul>… и даже слишком.
  4. 4. Так что имеем сейчас <ul><li>Полноценный компьютер в кармане </li></ul><ul><li>Малый размер экрана </li></ul><ul><li>Полноценный интернет ( Wi-Fi ) </li></ul><ul><li>Ряд ограничений ( Flash, цена интернета) </li></ul><ul><li>Геолокация и прочие встроенные модули </li></ul>
  5. 5. Что изменилось еще <ul><li>Новые возможности в создании сайтов </li></ul><ul><li>Постепенный уход от десктопных приложений </li></ul><ul><li>Выросла скорость интернета </li></ul>
  6. 6. А это значит… <ul><li>Вы все еще не пишите под мобильные устройства? </li></ul>Тогда мы идем к вам!
  7. 7. Способы <ul><li>HTML+JS+CSS </li></ul><ul><li>Использовать фреймворк </li></ul>
  8. 8. HTML+JS+CSS <ul><li>Разные платформы </li></ul><ul><li>Разные экраны </li></ul><ul><li>Где то это уже было, да? </li></ul>Но разбираться как это работает нужно, поэтому читаем « Building iPhone Apps with HTML, CSS, and JavaScript » http :// ofps.oreilly.com / titles /9780596805784/
  9. 9. Будь проще и люди к тебе потянуться <ul><li>Преимущество фреймворков: </li></ul><ul><ul><li>Решается проблема кроссплатформенности </li></ul></ul><ul><ul><li>Решается проблема разных экранов </li></ul></ul><ul><ul><li>Готовые решения для native-like поведения </li></ul></ul>
  10. 10. Многообразие выбора <ul><li>jQTouch </li></ul><ul><li>jQueryMobile </li></ul><ul><li>Sencha Touch </li></ul><ul><li>XUI </li></ul><ul><li>… .. </li></ul>
  11. 11. jQTouch <ul><li>Первый серьезный мобильный фреймворк </li></ul><ul><li>Многое подарил jQuery Mobile и Sencha Touch </li></ul><ul><li>Созданы native эффекты переходов между экранами </li></ul><ul><li>Первый блин немножко комом </li></ul>http :// www.jqtouch.com /
  12. 12. jQTouch <ul><li>< div   id =&quot;home&quot;   class =&quot;current&quot;>          < div   class =&quot;toolbar&quot;>            < h1 > jQTouch </ h1 >            < a   class =&quot;button slideup&quot;   id =&quot;infoButton&quot;   href =&quot;#about&quot;> About </ a >          </ div >          < ul   class =&quot;rounded&quot;>            < li   class =&quot;arrow&quot;> </li></ul><ul><li>< a   href =&quot;#ui&quot;> User Interface </ a >   </li></ul><ul><li>< small   class =&quot;counter&quot;> 4 </ small > </li></ul><ul><li></ li >             </ ul >          < div   class =&quot;info&quot;>            < p > Text </ p >          </ div >        </ div >   </li></ul>
  13. 13. jQuery Mobile <ul><li>Построен на jQuery </li></ul><ul><li>Поддержка всех платформ </li></ul><ul><li>Удобная работа с событиями </li></ul><ul><li>Поддержка HTML5 </li></ul><ul><li>Удобная работа с темами </li></ul>http :// jquerymobile.com /
  14. 14. jQuery Mobile <ul><li>< div   data-role =&quot;content&quot;>      < div   data-role =&quot;fieldcontain&quot;>         < label   for =&quot;name&quot;> Text Input: </ label >         < input   type =&quot;text&quot;   name =&quot;name&quot;   id =&quot;name&quot;   value =&quot;&quot;   />      </ div >      < div   data-role =&quot;fieldcontain&quot;>        < label   for =&quot;textarea&quot;> Textarea: </ label >        < textarea   cols =&quot;40&quot;   rows =&quot;8&quot;   name =&quot;textarea&quot;   id =&quot;textarea&quot;> </li></ul><ul><li></ textarea >      </ div >   </ div > </li></ul>
  15. 15. Sencha Touch <ul><li>Быстрое создание сложного интерфейса </li></ul><ul><li>Простота в создание своих компонент </li></ul><ul><li>Удобная работа с данными </li></ul><ul><li>Проблема с производительностью </li></ul>http :// www.sencha.com / products / touch /
  16. 16. Sencha Touch <ul><li>var  timeline =  new  Ext.Component({ title:  'Timeline' , </li></ul><ul><li>     t ls:  'timeline' ,  scroll:  'vertical' , </li></ul><ul><li>     tpl: [        '<tpl for=&quot;.&quot;>' ,        '<div class=&quot;tweet&quot;>' ,         '<div class=&quot;avatar&quot;>' , </li></ul><ul><li>'<img src=&quot;{profile_image_url}&quot;/>' , </li></ul><ul><li>'</div>' ,          '<div class=&quot;tweet-content&quot;>' ,          '<h2>{from_user}</h2>' ,           '<p>{text}</p>' ,         '</div>' ,        '</div>' ,      '</tpl>'     ]   }); </li></ul>
  17. 17. XUI <ul><li>Очень минималистичный </li></ul><ul><li>Отдельные сборки под платформы </li></ul><ul><li>Поддержка HTML </li></ul>http :// xuijs.com /
  18. 18. XUI <ul><li>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>' ); </li></ul>
  19. 19. Что еще? <ul><li>Wink toolkit </li></ul><ul><li>iUI </li></ul><ul><li>Dojo Mobile </li></ul><ul><li>DHTMLX Touch </li></ul><ul><li>+ Спойлер </li></ul>
  20. 20. Делаем нативным <ul><li>PhoneGap </li></ul><ul><li>MotherApp </li></ul><ul><li>Big5 </li></ul><ul><li>Rhodes </li></ul>
  21. 21. Что почитать <ul><li>Курс лекций и материалов по мобильной веб-разработке и дизайну </li></ul><ul><li>http://goo.gl/hLJv1 </li></ul><ul><li>Comparing Mobile Web Frameworks </li></ul><ul><li>http ://goo.gl/L8Yh5 </li></ul><ul><li>Сравнение фреймворков для создания native приложений </li></ul><ul><li>http ://goo.gl/rNb4t </li></ul>
  22. 22. Вопросы? <ul><li>Ребров Андрей </li></ul><ul><li>Luxoft Professional </li></ul><ul><li>[email_address] </li></ul><ul><li>twitter.com/andrebrov </li></ul><ul><li>http:// andrebrov.net </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×