Ratchet - Framework para Web Apps - iOS & Android

244 visualizações

Publicada em

Trabalho da disciplina de Desenvolvimento Web para Dispositivos Móveis, do professor João Vinagre Lima, para o Curso de Desenvolvimento de Aplicativos para Dispositivos Móveis, pós graduação PUC-IEC MG, sobre o framework Ratchet, que funciona para desenvolvimento de aplicativos cross platform, por meio de HTML, CSS e JavaScript, que podem ser estilizados para iOS, Android ou para browsers.

Publicada em: Celular
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
244
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ratchet - Framework para Web Apps - iOS & Android

  1. 1. Ratchet Mobile Apps para Android ou IOS com [ HTML + CSS + JS ] Mobile Apps para Android ou IOS com [ HTML + CSS + JS ]
  2. 2. Responsáveis: .Bruno .Felipe .João Pedro .Wilker
  3. 3. Primeiramente, Apresentação Trabalho da disciplina de Desenvolvimento WEB Mobile do Professor João Lima Vinagre para o curso de Desenvolvimento de Aplicações Móveis da PUC-Minas. Esse trabalho apresenta uma introdução e uma explicação sobre o framework Ratchet, com exemplos e suas aplicações.
  4. 4. Basics O que precisamos saber sobre Ratchet - Qual é a do Ratchet? - Getting Started - Structure - Components
  5. 5. Qual é a do Ratchet? - Ratchet começou como uma série de protótipos HTML e CSS do Twitter para iPhone. - Ficou evidente que essa era a maneira mais rápida e eficaz para projetar aplicativos móveis.
  6. 6. Getting Started - Depois de descompactar, arquivos pré-compilados do Ratchet já estão prontos para uso rápido em projetos WEB - Código-fonte Ratchet, incluindo CSS, JavaScript, Sass e ativos de fonte
  7. 7. Getting Started - Estilize: adicione o link para ratchet-theme-ios.css ou ratchet- theme-android.css no <head> da sua aplicação; - Sempre deixe as classes .bar iniciais no <body> - Todo conteúdo deve ficar dentro de uma div .content - Conecte: navegação entre as páginas do app com push.js; - Debug e Teste: Verifique com o apoio do navegador para emular os eventos; - Lance: Publique o aplicativo em um servidor web para o seu celular, encapsule em um framework hibrido ou disponibilize em outro app nativo;
  8. 8. Getting Started - Basic Template - Seguir o básico em: - http://goratchet.com/getting-started/#pageLayout
  9. 9. Getting Started
  10. 10. Structure Ratchet, out of the box ratchet/ ├── css/ │ ├── ratchet.css │ ├── ratchet.min.css │ ├── ratchet-theme-android.css │ ├── ratchet-theme-android.min.css │ ├── ratchet-theme-ios.css │ ├── ratchet-theme-ios.min.css ├── js/ │ ├── ratchet.js │ └── ratchet.min.js └── fonts/ ├── ratchicons.eot ├── ratchicons.svg ├── ratchicons.ttf └── ratchicons.woff
  11. 11. Structure Ratchet, Source Code ratchet/ ├── sass/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
  12. 12. Components Componentes do Ratchet O tutorial de Ratchet demonstra em seus exemplos aproximadamente 35 combinações de seus componentes, na qual alguns serão apresentados neste trabalho
  13. 13. Title Bar (Barras de Título e suas variedades)
  14. 14. Title Bar (Barras de Títulos e suas variedades) Title Bar Title Bar With Buttons Title Bar With Icons Title Bar With Link Buttons and Icons Title Bar With Segmented Control
  15. 15. Tab Bar (Barras de Abas e suas variedades)
  16. 16. Tab Bar (Barras de Abas e suas variedades) Tab Bar Tab Bar (Labels Only) Standard Bar
  17. 17. Table Views (Exibição de Tabelas e suas variedades)
  18. 18. Table Views (Exibição de Tabelas e suas variedades) Table Views Table Views With Badges and Chevrons * Pode ter uma exibição de tabela só com Badge (Números) ou só com Chevrons (Setas) além deste acima!
  19. 19. Table Views (Exibição de Tabelas e suas variedades) Table View With Media Icons Table View With Toggles Table View With Buttons
  20. 20. Buttons (Botões e suas variedades)
  21. 21. Buttons (Botões e suas variedades) Buttons Buttons With Icons
  22. 22. Buttons (Botões e suas variedades) Buttons With Badges Block Buttons
  23. 23. Forms (Formulários e suas variedades)
  24. 24. Forms (Formulários e suas variedades) Forms Forms With Input Groups and Labels
  25. 25. Toggle e Popover
  26. 26. Toggle e Popover Toggle Popover
  27. 27. Modal
  28. 28. Modal Modal
  29. 29. Push
  30. 30. Push Push
  31. 31. Push push (.js) é uma seção JavaScript que vem pre- carregada com Ratchet, no arquivo ratchet.js. Não é preciso baixar de fontes externas. Ele conecta várias paginas HTML em um app Ratchet por meio de requisições AJAX. <a class="navigate-right" href="two.html" data-transition="slide-in"> <img class="media-object pull-left" src="images/img1.jpeg"> Nintendo apologises for lack of virtual equality </a> Neste exemplo, uma imagem estilo magazine, ao lado, faz chamada para a pagina two.html, que ao ser clicada, carrega a pagina com efeito de slide, ao invés do efeito “post” original do browser. http://www.sitepoint.com/ratchets-push-js-prototyping- mobile-apps-multiple-screens/
  32. 32. Ratchicons
  33. 33. Ratchicons iOS Android
  34. 34. References Site do Ratchet: http: //goratchet.com/ GitHub: https://github. com/twbs/ratchet Componentes: http://goratchet. com/components/ Exemplos: http://goratchet. com/examples/

×