• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile web development
 

Mobile web development

on

  • 1,940 views

 

Statistics

Views

Total Views
1,940
Views on SlideShare
1,003
Embed Views
937

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 937

http://andrebrov.net 930
http://www.linkedin.com 6
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile web development Mobile web development Presentation Transcript

    • Мобильная веб-разработка Ребров Андрей
    • Обо мне
      • Luxoft, 10 ЦСР
      • Разработка мобильных приложений в следующих сферах:
        • логистика; 
        • перевозка пациентов;
        • поиск лекарств;
        • крупный сотовый оператор.
      • Блог:  http://andrebrov.net
      • Твиттер:  @andrebrov
      • Почта: [email_address]
    • О семинаре
      • 1. Почему стоит выбирать мобильный веб.
      • 2. Как разрабатывать.
    • Решает ли мобильный веб все проблемы?
    • Решает ли мобильный веб все проблемы? НЕТ!
    • Но на него стоит переходить уже сейчас?
    • ДА! Но на него стоит переходить уже сейчас?
    • Когда телефоны были большими…
      • Сайты для них были:
          • унылые;
          • нефункциональные;
          • только WAP…
          • … или их вообще не было.
      Хотя кто-то ставил Opera Mini и радовался жизни =)
    • Время шло и теперь…
      • Различных мобильных устройств стало много..
      … и даже слишком.
    • Так что имеем сейчас
        • Полноценный компьютер в кармане
        • Малый размер экрана
        • Полноценный интернет (Wi-Fi)
        • Ряд ограничений (Flash, цена интернета)
        • Геолокация и прочие встроенные модули
    • Что изменилось еще
        • Новые возможности в создании сайтов
        • Постепенный уход от десктопных приложений
        • Выросла скорость интернета
    • Осталось сделать выбор
    • Разрушим ряд мифов!
    • Нативные приложения имеют больший функционал
    • Нативные приложения имеют больший функционал  Myth busted
      • Геолокация
      • Работа с файловой системой
      • Доступ к акселерометру и гироскопу
      • Работа с touch- событиями
    • Нативные приложения имеют большую производительность
        • Аппаратное ускорение
        • Мультипоточность
    • Нативные приложения имеют большую производительность Myth busted http://stevesouders.com/mobileperf/
    • Нативные приложения проще разрабатывать
    • Нативные приложения проще разрабатывать  Myth busted
      • HTML
      • CSS
      • JS
    • Нативные приложения проще сделать с использованием родных стилей
    • Нативные приложения проще сделать с использованием родных стилей  Myth busted
      • Sencha Touch
      • jQTouch
      • jQuery Mobile
    • Нативные приложения проще найти (и купить)
        • Apple Store
        • Android market
        • ...
    • Нативные приложения проще найти (и купить)  Myth busted
    • Нативные приложения проще монетизировать Единичная продажа
    • Нативные приложения проще монетизировать  Myth busted
        •  Pay-per-use
        • Advertise
        • SaaS
    • Рынок мобильных приложений
    • PC vs Mobile
    • Мобильный интернет все более популярен
    • Конец первой части
    • Время разработки
    • Итак...
      • Вы все еще не пишите под мобильные устройства?
      Тогда мы идем к вам!
    • Способы
        • HTML+JS+CSS
        • Использовать фреймворк
    • HTML+JS+CSS
        • Разные платформы
        • Разные экраны
      • Где то это уже было, да?
      Но разбираться как это работает нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript» http://ofps.oreilly.com/titles/9780596805784/
    • Будь проще и люди к тебе потянуться
      • Преимущество фреймворков:
        • Решается проблема кроссплатформенности
        • Решается проблема разных экранов
        • Готовые решения для native-like поведения
    • Многообразие выбора
        • jQTouch
        • jQueryMobile
        • Sencha Touch
        • XUI
        • … ..
    • jQTouch
        • Первый серьезный мобильный фреймворк
        • Многое подарил jQuery Mobile и Sencha Touch
        • Созданы native эффекты переходов между экранами
        • Первый блин немножко комом
      http:// www.jqtouch.com /
    • jQTouch
      • < 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;>
      • < a href =&quot;#ui&quot;> User Interface </ a >
      • < small class =&quot;counter&quot;> 4 </ small >
      • </ li > </ ul > < div class =&quot;info&quot;> < p >Text</ p > </ div > </ div >
    • jQuery Mobile
        • Построен на jQuery
        • Поддержка всех платформ
        • Удобная работа с событиями
        • Поддержка HTML5
        • Удобная работа с темами
      http:// jquerymobile.com /
    • jQuery Mobile
      • < 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;>
      • </ textarea > </ div > </ div >
    • Sencha Touch
        • Быстрое создание сложного интерфейса
        • Простота в создание своих компонент
        • Удобная работа с данными
        • Проблема с производительностью
      http:// www.sencha.com /products/touch/
    • Sencha Touch
      • var  timeline =  new  Ext.Component({ title:  'Timeline' ,
      •      tls:  'timeline' ,  scroll:  'vertical' ,
      •      tpl: [  '<tpl for=&quot;.&quot;>' , '<div class=&quot;tweet&quot;>' , '<div class=&quot;avatar&quot;>' ,
      • '<img src=&quot;{profile_image_url}&quot;/>' ,
      • '</div>' ,  '<div class=&quot;tweet-content&quot;>' , '<h2>{from_user}</h2>' ,  '<p>{text}</p>' , '</div>' , '</div>' , '</tpl>'     ]   });
    • XUI
        • Очень минималистичный
        • Отдельные сборки под платформы
        • Поддержка HTML
      http:// xuijs.com /
    • 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>' );
    • Что еще?
        • Wink toolkit
        • iUI
        • Dojo Mobile
        • DHTMLX Touch
      • + Спойлер
    • Делаем нативным
        • PhoneGap
        • MotherApp
        • Big5
        • Rhodes
    • Что почитать
        • Курс лекций и материалов по мобильной веб-разработке и дизайну
      • http://goo.gl/hLJv1
        • Comparing Mobile Web Frameworks
      • http://goo.gl/L8Yh5
        • Сравнение фреймворков для создания native приложений
      • http://goo.gl/rNb4t
    • Вопросы? Ребров Андрей Luxoft Professional [email_address] twitter.com/andrebrov http:// andrebrov.net