ratchet - framework para web apps - ios & android

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

Upload: wilker-foureaux

Post on 16-Feb-2017

252 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: Ratchet - Framework para Web Apps - iOS & Android

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

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

Page 3: Ratchet - Framework para Web Apps - iOS & Android

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

BasicsO que precisamos saber

sobre Ratchet

- Qual é a do Ratchet?- Getting Started- Structure- Components

Page 5: Ratchet - Framework para Web Apps - iOS & Android

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

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

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

Getting Started - Basic Template

- Seguir o básico em:- http://goratchet.com/getting-started/#pageLayout

Page 9: Ratchet - Framework para Web Apps - iOS & Android

Getting Started

Page 10: Ratchet - Framework para Web Apps - iOS & Android

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

StructureRatchet, Source Code

ratchet/├── sass/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/└── docs/ └── examples/

Page 12: Ratchet - Framework para Web Apps - iOS & Android

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

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

Page 14: Ratchet - Framework para Web Apps - iOS & Android

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

Tab Bar(Barras de Abas e suas variedades)

Page 16: Ratchet - Framework para Web Apps - iOS & Android

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

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

Page 18: Ratchet - Framework para Web Apps - iOS & Android

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

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

Buttons(Botões e suas variedades)

Page 21: Ratchet - Framework para Web Apps - iOS & Android

Buttons(Botões e suas variedades)

Buttons Buttons With Icons

Page 22: Ratchet - Framework para Web Apps - iOS & Android

Buttons(Botões e suas variedades)

Buttons With BadgesBlock Buttons

Page 23: Ratchet - Framework para Web Apps - iOS & Android

Forms(Formulários e suas variedades)

Page 24: Ratchet - Framework para Web Apps - iOS & Android

Forms(Formulários e suas variedades)

Forms Forms With Input Groups and Labels

Page 25: Ratchet - Framework para Web Apps - iOS & Android

Toggle e Popover

Page 26: Ratchet - Framework para Web Apps - iOS & Android

Toggle e Popover

Toggle

Popover

Page 27: Ratchet - Framework para Web Apps - iOS & Android

Modal

Page 28: Ratchet - Framework para Web Apps - iOS & Android

Modal

Modal

Page 29: Ratchet - Framework para Web Apps - iOS & Android

Push

Page 30: Ratchet - Framework para Web Apps - iOS & Android

Push

Push

Page 31: Ratchet - Framework para Web Apps - iOS & Android

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

Ratchicons

Page 33: Ratchet - Framework para Web Apps - iOS & Android

RatchiconsiOS Android