Ratchet - Framework para Web Apps - iOS & Android

Ratchet
Mobile Apps para Android ou IOS
com [ HTML + CSS + JS ]
Mobile Apps para Android ou IOS
com [ HTML + CSS + JS ]

Responsáveis:
.Bruno
.Felipe
.João Pedro
.Wilker

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.

Basics
O 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

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

Structure
Ratchet, Source Code
ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

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

Title Bar
(Barras de Título e suas variedades)

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

Tab Bar
(Barras de Abas e suas variedades)

Tab Bar
(Barras de Abas e suas variedades)
Tab Bar
Tab Bar (Labels Only)
Standard Bar

Table Views
(Exibição de Tabelas e suas variedades)

Table Views
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
Table View With Media Icons
Table View With Toggles
Table View With Buttons

Buttons
(Botões e suas variedades)

Buttons
Buttons Buttons With Icons

Buttons
Buttons With Badges
Block Buttons

Forms
(Formulários e suas variedades)

Forms
(Formulários e suas variedades)
Forms Forms With Input Groups and Labels

Toggle e Popover
Toggle
Popover

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/

Ratchet - Framework para Web Apps - iOS & Android

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Ratchet - Framework para Web Apps - iOS & Android

Ähnlich wie Ratchet - Framework para Web Apps - iOS & Android (20)

Ratchet - Framework para Web Apps - iOS & Android