Download - [PUC-MG][DAM][DWEB] Ratchet
Ratchet
Mobile Apps para Android ou IOScom [ HTML + CSS + JS ]
Mobile Apps para Android ou IOScom [ HTML + CSS + JS ]
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.
BasicsO que precisamos saber
sobre Ratchet
- Qual é a do Ratchet?- Getting Started- Structure- Components
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.
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
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;
Getting Started - Basic Template
- Seguir o básico em:- http://goratchet.com/getting-started/#pageLayout
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
StructureRatchet, Source Code
ratchet/├── sass/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/└── docs/ └── examples/
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
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
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!
Table Views(Exibição de Tabelas e suas variedades)
Table View With Media Icons
Table View With Toggles
Table View With Buttons
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/
References
Site do Ratchet: http://goratchet.com/
GitHub: https://github.com/twbs/ratchet
Componentes: http://goratchet.com/components/
Exemplos: http://goratchet.com/examples/