O documento apresenta o framework Ratchet para desenvolvimento de aplicativos móveis com HTML, CSS e JS. Ele descreve os principais componentes do Ratchet como barras de título, abas, tabelas, botões e formulários. Também explica como utilizar o push.js para navegar entre páginas do app e os ícones Ratchicons para os estilos Android e iOS.
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. Basics
O que precisamos saber
sobre Ratchet
- Qual é a do Ratchet?
- Getting Started
- Structure
- Components
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. 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. 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. Getting Started - Basic Template
- Seguir o básico em:
- http://goratchet.com/getting-started/#pageLayout
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
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
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. Table Views
(Exibição de Tabelas e suas variedades)
Table View With Media Icons
Table View With Toggles
Table View With Buttons
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/