Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvimento ágil com jQuery Mobile

Desenvolvimento ágil com jQuery Mobile

Apresentação sobre desenvolvimento ágil com jQuery Mobile no RSJS 2013 por Gabriel Zigolis

Gabriel Zigolis

March 23, 2013
Tweet

More Decks by Gabriel Zigolis

Other Decks in Programming

Transcript

  1. Por: / Gabriel Zigolis @zigolis

  2. » Gabriel Zigolis QUEM É? Front-End Developer há 8 anos

    Instrutor de desenvolvimento web há 6 anos globo.com, grupo RBS, IBM, GoodCard, SelulloidAg... gabriel.zigolis@gmail.com http://zigolis.com
  3. » jQuery Mobile O QUE É? É um framework para

    desenvolvimento web, otimizado para interação por toque, capaz de criar sistemas de interface unificados, baseados em HTML5 e CSS3 para as principais plataformas móveis, construído sobre o jQuery e jQuery UI.
  4. » jQuery Mobile COMO EU USO ISSO? Guia de introdução

    Documentação http://view.jquerymobile.com/1.3.0/docs/intro/ http://view.jquerymobile.com/1.3.0/
  5. » jQuery Mobile INICIANDO... Adicione o Doctype de HTML5: ‹!DOCTYPE

    html› Adicione a meta tag (viewport) Inclua o jQuery, jQuery Mobile e os arquivos JavaScript Inclua o CSS do jQuery Mobile Baixe os arquivos ou use através do CDN
  6. » jQuery Mobile CÓDIGO < ! D O C T

    Y P E h t m l > < h t m l > < h e a d > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > < t i t l e > j Q u e r y M o b i l e < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p : / / c o d e . j q u e r y . c o m / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . c s s " / > < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / j q u e r y - 1 . 9 . 1 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < / b o d y > < / < h t m l >
  7. » jQuery Mobile COMO FUNCIONA? jQm trabalha com o conceito

    de páginas Em cada página temos "divs" com o atributo data-role Definindo assim header, content e footer Div com atributo data-role? <div data-role="header"> Isso mesmo, HTML5 permite qualquer atributo!
  8. » jQuery Mobile CÓDIGO < d i v d a

    t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " h e a d e r " > < h 1 > R S J S 2 0 1 3 < / h 1 > < / d i v > < d i v d a t a - r o l e = " c o n t e n t " > < p > S e g u n d a e d i ç ã o d o m a i o r e v e n t o d e J a v a s c r i p t d o s u l d o p a í s . < / p > < p > C o n f i r a o s u c e s s o d a p r i m e i r a e d i ç ã o e g a r a n t a o q u a n t o a n t e s a s u a i n s c r i ç ã o . < / p > < / d i v > < / d i v >
  9. » jQuery Mobile E A MÁGICA ACONTECE Segunda edição do

    maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. RSJS 2013 Todos os direitos reservados.
  10. » jQuery Mobile EM OUTROS BREAKPOINTS Segunda edição do maior

    evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. RSJS 2013 Todos os direitos reservados.
  11. » jQuery Mobile E PARA CUSTOMIZAR? É extramamente simples adaptar

    ao estilo do seu projeto, com poucas linhas de css e algumas classes no HTML.
  12. » jQuery Mobile CÓDIGO . u i - p a

    g e { b a c k g r o u n d : # f 9 f 9 f 9 ; f o n t - f a m i l y : ' P T S a n s ' , s a n s - s e r i f ; } . u i - h e a d e r { b a c k g r o u n d : # f 9 f 9 f 9 ; b o r d e r - t o p : 5 p x s o l i d # A 5 1 D 1 D ; } . l o g o { b a c k g r o u n d : u r l ( . . / . . / i m g / l o g o . p n g ) ; f o n t : 0 / 0 a r i a l ; h e i g h t : 7 5 p x ; w i d t h : 5 8 p x ; } . u i - f o o t e r { b a c k g r o u n d : # A 5 1 D 1 D ; }
  13. » jQuery Mobile E SUA APLICAÇÃO FICA ASSIM Segunda edição

    do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados.
  14. » jQuery Mobile WIDGETS De forma simples, prática e rápida

    podemos enriquecer nossa aplicação com o uso dos Widgets. Caixas de diálogo Elementos de formulário Navbar Transições ...
  15. » jQuery Mobile CÓDIGO - NAVBAR < d i v

    d a t a - r o l e = " n a v b a r " d a t a - g r i d = " d " > < u l > < l i > < a h r e f = " # " c l a s s = " u i - b t n - a c t i v e " > s o b r e < / a > < / l i > < l i > < a h r e f = " # " > i n s c r i ç õ e s < / a > < / l i > < l i > < a h r e f = " # " > p r o g r a m a ç ã o < / a > < / l i > < / u l > < / d i v >
  16. » jQuery Mobile E LÁ VEM ELE... Segunda edição do

    maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Todos os direitos reservados.
  17. » jQuery Mobile WIDGETS E navegação, como funciona se eu

    precisar de modais, alertas ou simples links? Ah! E como eu faço a mágica das animações?
  18. » jQuery Mobile CÓDIGO - NAVEGAÇÃO < d i v

    d a t a - r o l e = " n a v b a r " d a t a - g r i d = " d " > < u l > < l i > < a h r e f = " i n d e x . h t m l " c l a s s = " u i - b t n - a c t i v e " > s o b r e < / a > < / l i > < l i > < a h r e f = " i n s c r i c o e s . h t m l " d a t a - r e l = " d i a l o g " d a t a - t r a n s i t i o n = " p o p " > i n s c r i ç õ e s < / a > < / l i > < l i > < a h r e f = " p r o g r a m a c a o . h t m l " d a t a - t r a n s i t i o n = " f l o w " > p r o g r a m a ç ã o < / a > < / l i > < / u l > < / d i v >
  19. » jQuery Mobile E LÁ VEM ELE... Segunda edição do

    maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Todos os direitos reservados.
  20. » jQuery Mobile WIDGETS Beleza, mas agora eu preciso de

    um formulário de contato, e ai? E outra, eu gostaria que ele aparecesse diferente na tela...
  21. » jQuery Mobile CÓDIGO - PAINEL < d i v

    d a t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " p a n e l " i d = " c o n t a t o " > / * F o r m * / < / d i v > < ! - - h e a d e r - - > < ! - - c o n t e n t - - > < ! - - f o o t e r - - > < / d i v >
  22. » jQuery Mobile CÓDIGO - FORM < f o r

    m > < l a b e l f o r = " n o m e " > N o m e : < / l a b e l > < i n p u t t y p e = " t e x t " n a m e = " n o m e " i d = " n o m e " / > < l a b e l f o r = " e m a i l " > E m a i l : < / l a b e l > < i n p u t t y p e = " e m a i l " n a m e = " e m a i l " i d = " e m a i l " d a t a - c l e a r - b t n = " t r u e " / > < l a b e l f o r = " s e l e c t " > M o t i v o d o c o n t a t o : < / l a b e l > < s e l e c t n a m e = " s e l e c t " i d = " s e l e c t " d a t a - n a t i v e - m e n u = " f a l s e " > < o p t i o n > S e l e c i o n e u m a o p ç ã o < / o p t i o n > < o p t i o n v a l u e = " 1 " > D ú v i d a s < / o p t i o n > < o p t i o n v a l u e = " 2 " > S u g e s t õ e s < / o p t i o n > < / s e l e c t > < l a b e l f o r = " t e x t a r e a " > E s c r e v a s u a m e n s a g e m : < / l a b e l > < t e x t a r e a c o l s = " 4 0 " r o w s = " 8 " n a m e = " t e x t a r e a " i d = " t e x t a r e a " > < / t e x t a r e a > < i n p u t t y p e = " s u b m i t " v a l u e = " E n v i a r " > < / f o r m >
  23. » jQuery Mobile E DESSA VEZ O QUE TEMOS... Segunda

    edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Dúvidas? Todos os direitos reservados.
  24. » jQuery Mobile WIDGETS Bacana, e agora mais alguma maneira

    de "esconder" o conteúdo?
  25. » jQuery Mobile CÓDIGO - COLLAPSIBLE < d i v

    d a t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " c o n t e n t " > < p c l a s s = " d e s c - e v e n t o " > < e m > P r o g r a m a ç ã o ! < / e m > < / p > < d i v d a t a - r o l e = " c o l l a p s i b l e - s e t " > < d i v d a t a - r o l e = " c o l l a p s i b l e " d a t a - t h e m e = " c " d a t a - c o n t e n t - t h e m e = " d " > < h 4 > 8 h 3 0 < / h 4 > < p > C h e c k i n < / p > < / d i v > < d i v d a t a - r o l e = " c o l l a p s i b l e " d a t a - t h e m e = " c " d a t a - c o n t e n t - t h e m e = " d " > < h 4 > 9 h 0 0 < / h 4 > < p > D i s s e c a n d o s u a a p l i c a ç ã o c o m C h r o m e D e v T o o l s < / p > < / d i v > < / d i v > < / d i v > < / d i v >
  26. » jQuery Mobile SIMPLES E DIRETO... Segunda edição do maior

    evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas?
  27. » jQuery Mobile JAVASCRIPT E o JavaScript, onde e como

    a gente utiliza?
  28. » jQuery Mobile CÓDIGO - CHAMADA < s c r

    i p t s r c = " . . / j q u e r y - 1 . 9 . 1 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " j q u e r y . c o n f i g s . j s " > < / s c r i p t > < s c r i p t s r c = " . . / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . j s " > < / s c r i p t >
  29. » jQuery Mobile CÓDIGO - JQUERY.CONFIGS.JS $ ( d o

    c u m e n t ) . o n ( " m o b i l e i n i t " , f u n c t i o n ( ) { $ . m o b i l e . d e f a u l t P a g e T r a n s i t i o n = " f l i p " ; } ) ;
  30. » jQuery Mobile E O PADRÃO DE NAVEGAÇÃO DO SISTEMA

    MUDA... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas?
  31. » jQuery Mobile JAVASCRIPT Os eventos são outro ponto simples

    de trabalhar e modificar na aplicação. Touch Orientation Scroll ...
  32. » jQuery Mobile CÓDIGO - JQUERY.EVENTS.JS $ ( f u

    n c t i o n ( ) { $ ( w i n d o w ) . b i n d ( " o r i e n t a t i o n c h a n g e " , f u n c t i o n ( e ) { i f ( e . o r i e n t a t i o n = = " p o r t r a i t " ) { $ ( " # l a n d s c a p e " ) . f a d e O u t ( 5 0 0 , f u n c t i o n ( ) { $ ( " # p o r t r a i t " ) . f a d e I n ( 3 0 0 ) ; } ) ; } e l s e { $ ( " # p o r t r a i t " ) . f a d e O u t ( 5 0 0 , f u n c t i o n ( ) { $ ( " # l a n d s c a p e " ) . f a d e I n ( 3 0 0 ) ; } ) ; } } ) } )
  33. » jQuery Mobile CÓDIGO - GRID < d i v

    d a t a - r o l e = " c o n t e n t " > < d i v c l a s s = " u i - g r i d - a " i d = " p o r t r a i t " > < d i v c l a s s = " u i - b l o c k - a b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - b b o x " > P o r t r a i t < / d i v > < / d i v > < d i v c l a s s = " u i - g r i d - c " i d = " l a n d s c a p e " > < d i v c l a s s = " u i - b l o c k - a b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - b b o x " > L a n d s c a p e < / d i v > < d i v c l a s s = " u i - b l o c k - c b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - d b o x " > L a n d s c a p e < / d i v > < / d i v > < / d i v >
  34. » jQuery Mobile OLHA AGORA A APLICAÇÃO EM LANDSCAPE... Orientation

    Landscape Orientation Landscape Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas?
  35. » jQuery Mobile ABRA A SUA MENTE Com a manipulação

    dos eventos podemos por exemplo carregar um JSON com mais dados para uma orientation. Ou para um breakpoint específico.
  36. » jQuery Mobile QUEM ESTÁ USANDO O JQM? http://m.fiat.es http://m.rolex.com/en/

    http://mobile.united.com http://m.sears.com http://events.jquery.org/m/ http://www.jqmgallery.com
  37. » jQuery Mobile DÚVIDAS? SUGESTÕES OU DOAÇÕES...

  38. » jQuery Mobile OBRIGADO!!! Material disponível em: www.zigolis.com.br/rsjs/