'

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

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





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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> 


Слайд 12

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


Слайд 13

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>


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


×

HTML:





Ссылка: