• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
 

QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

on

  • 2,445 views

P

P

Statistics

Views

Total Views
2,445
Views on SlideShare
2,406
Embed Views
39

Actions

Likes
4
Downloads
55
Comments
1

4 Embeds 39

http://eventifier.co 31
http://localhost 4
https://si0.twimg.com 3
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

11 of 1 previous next

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

    QConSP 2012: Sencha Touch 2: Mobile Multiplataforma QConSP 2012: Sencha Touch 2: Mobile Multiplataforma Presentation Transcript

    • Sencha Touch 2: Mobile MultiplataformaLoiane Gronerww.loiane.com@loiane
    • Loiane GronerEvangelista Java e SenchaAutora internacionalGerente de Projetoshttp://loiane.com@loiane
    • Antes de começar...
    • Novidades HTML 5•Melhor Semântica•Offline Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráficos nativos•Melhor Performance•CSS3
    • Melhor Semântica•Mais tags HTML•Microdata•Microformats
    • Offline Storate•App Cache•Local storage•Session storage•Web database
    • Acesso ao Device•GeoLocalização•Acelerômetro•Input Audio/Câmera•Compass (iOS 5)
    • Melhor Conectividade•Web Sockets nativos
    • Multimedia•Audio•Video
    • Acesso Gráficos nativos•SVG, Canvas, VML•Animações 3D com CSS•WebGL
    • Melhor Performance•Webwork •Threaded JavaScript•XHR2 •Blob •Checked data •Requests cross domain
    • CSS3•Layouts melhores e maisrápidos•Trasições nativas •aceleração de hardware 3D•Gradientes•Formato Web Open Font
    • PQ?
    • Escolha HTML 5 se:•Desenvolver app comnúmero pessoas limitadas•App para mobile devices•Deploy apps sem limitaçãode app stores•App tem que ser acessívelem qualquer lugar•Quer usar skills existentes(HTML, CSS, JS)
    • Tecnologias
    • O que éSencha Touch?
    • Primeiro framework Javascript paradesenvolvimento de apps mobile ricas usando padrões web
    • O que tem no Sencha Touch?Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
    • ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySlider ComponentsForms & fields Toolbars & buttons HTML5- Audio Lists- Video - Nested, Grouped, Sortable- GeoLocationCarousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video
    • Forms
    • ScrollingScrollingMomentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
    • Eventos TouchBaseado em Eventos NativosAbstraído para PerformanceEventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
    • Data PackageModels, Stores, e Proxies- Associations- Validation- Local & server storageConsumir web services- JSON/P- XML- YQL
    • Temas Theming Use CSS3 & SASS Use CSS3 & SASS - Flexible themes - Flexible themes CSS3 com - Highly optimized - Highly optimizedSass e Compass e.g. e.g. $base-color: #ff6699 $base-color:
    • Plataformas
    • iOS
    • Android
    • Roadmap: Windows Phone
    • Webkit
    • Charts
    • Acesso Nativo
    • CâmeraExt.device.Camera.capture({ source: camera, destination: file, success: function(url) { //mostra foto em um widget the Imagem: Ext.create(Ext.Img, { src: url, fullscreen: true }); }});
    • GeolocationExt.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log(something went wrong!); }});
    • Ext.device.Geolocation.watchPosition({ frequency: 3000, // Update every 3 seconds callback: function(position) { console.log(Position updated!, position.coords); }, failure: function() { console.log(something went wrong!); }});
    • NotificationExt.device.Notification.show({ title: One Button, message: This is a simple notification with onebutton.});Ext.device.notification.vibrate();
    • Push - iOSExt.device.Push.register({ type: Ext.device.Push.ALERT|Ext.device.Push.BADGE|Ext.device.Push.SOUND, success: function(token) { console.log(# Push notification registration successful:); console.log( token: + token); }, failure: function(error) { console.log(# Push notification registration unsuccessful:); console.log( error: + error); }, received: function(notifications) { console.log(# Push notification received:); console.log( + JSON.stringify(notifications)); }});
    • OrientaçãoExt.device.Orientation.on({ scope: this, orientationchange: function(e) { console.log(Alpha: , e.alpha); console.log(Beta: , e.beta); console.log(Gamma: , e.gamma); }});
    • Offline appif (Ext.device.Connection.isOnline()) { Ext.Msg.alert(You are currently connected via + Ext.device.Connection.getType());} else { Ext.Msg.alert(You are not currently connected);}
    • Sencha Touch 2 + ExtJS 4
    • . .Views Views . Controllers Models Stores json Proxies json Servidor
    • Testes
    • JasminePhantomJS JSLint
    • Free
    • Continuous Integration + Suporte Paga = US$ 499
    • Show me the code! Exemplo app nativa iOS e Android em 5 minutos
    • Demos apps existentes
    • Curso Gratuito ExtJS 4 Sencha Touch 2http://loiane.com
    • Obrigada!Loiane Gronerww.loiane.com@loiane