[puc-mg][dam][dweb] ratchet

Ratchet

Mobile Apps para Android ou IOScom [ HTML + CSS + JS ]

Mobile Apps para Android ou IOScom [ 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.

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

http://goratchet.com/getting-started/#pageLayout

http://goratchet.com/getting-started/#pageLayout

Getting Started

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í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 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 View With Media Icons

Table View With Toggles

Table View With Buttons

Buttons(Botões e suas variedades)


Buttons Buttons With Icons


Buttons With BadgesBlock Buttons

Forms(Formulários e suas variedades)

Forms(Formulários e suas variedades)

Forms Forms With Input Groups and Labels

Toggle e Popover

Toggle e Popover

Toggle

Popover

Modal

Modal

Push

Push

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/

http://www.sitepoint.com/ratchets-push-js-prototyping-mobile-apps-multiple-screens/



Ratchicons

RatchiconsiOS Android

References

Site do Ratchet: http://goratchet.com/

GitHub: https://github.com/twbs/ratchet

Componentes: http://goratchet.com/components/

Exemplos: http://goratchet.com/examples/

http://goratchet.com/



https://github.com/twbs/ratchet



http://goratchet.com/components/



http://goratchet.com/examples/



[puc-mg][dam][dweb] ratchet

Technology