ratchet - framework para web apps - ios & android
TRANSCRIPT
![Page 1: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/1.jpg)
Ratchet
Mobile Apps para Android ou IOScom [ HTML + CSS + JS ]
Mobile Apps para Android ou IOScom [ HTML + CSS + JS ]
![Page 2: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/2.jpg)
Responsáveis:.Bruno.Felipe.João Pedro.Wilker
![Page 3: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/3.jpg)
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.
![Page 4: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/4.jpg)
BasicsO que precisamos saber
sobre Ratchet
- Qual é a do Ratchet?- Getting Started- Structure- Components
![Page 5: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/5.jpg)
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.
![Page 6: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/6.jpg)
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
![Page 7: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/7.jpg)
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;
![Page 8: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/8.jpg)
Getting Started - Basic Template
- Seguir o básico em:- http://goratchet.com/getting-started/#pageLayout
![Page 9: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/9.jpg)
Getting Started
![Page 10: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/10.jpg)
StructureRatchet, 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
![Page 11: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/11.jpg)
StructureRatchet, Source Code
ratchet/├── sass/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/└── docs/ └── examples/
![Page 12: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/12.jpg)
ComponentsComponentes 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
![Page 13: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/13.jpg)
Title Bar(Barras de Título e suas variedades)
![Page 14: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/14.jpg)
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
![Page 15: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/15.jpg)
Tab Bar(Barras de Abas e suas variedades)
![Page 16: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/16.jpg)
Tab Bar(Barras de Abas e suas variedades)
Tab Bar
Tab Bar (Labels Only)
Standard Bar
![Page 17: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/17.jpg)
Table Views(Exibição de Tabelas e suas variedades)
![Page 18: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/18.jpg)
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!
![Page 19: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/19.jpg)
Table Views(Exibição de Tabelas e suas variedades)
Table View With Media Icons
Table View With Toggles
Table View With Buttons
![Page 20: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/20.jpg)
Buttons(Botões e suas variedades)
![Page 21: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/21.jpg)
Buttons(Botões e suas variedades)
Buttons Buttons With Icons
![Page 22: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/22.jpg)
Buttons(Botões e suas variedades)
Buttons With BadgesBlock Buttons
![Page 23: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/23.jpg)
Forms(Formulários e suas variedades)
![Page 24: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/24.jpg)
Forms(Formulários e suas variedades)
Forms Forms With Input Groups and Labels
![Page 25: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/25.jpg)
Toggle e Popover
![Page 26: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/26.jpg)
Toggle e Popover
Toggle
Popover
![Page 27: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/27.jpg)
Modal
![Page 28: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/28.jpg)
Modal
Modal
![Page 29: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/29.jpg)
Push
![Page 30: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/30.jpg)
Push
Push
![Page 31: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/31.jpg)
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/
![Page 32: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/32.jpg)
Ratchicons
![Page 33: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/33.jpg)
RatchiconsiOS Android
![Page 34: Ratchet - Framework para Web Apps - iOS & Android](https://reader033.vdocuments.com.br/reader033/viewer/2022042600/58a5cd791a28ab6c2a8b5ae1/html5/thumbnails/34.jpg)
References
Site do Ratchet: http://goratchet.com/
GitHub: https://github.com/twbs/ratchet
Componentes: http://goratchet.com/components/
Exemplos: http://goratchet.com/examples/