Dividindo responsabilidades com

VRaptor, Rest, HTML5 e CSS3

André Luiz Forchesatto e Maurício Berté

É possível aproveitar a expertise de equipes multidisciplinares em projetos WEB?

Multidisciplinaridade

● java, php, c++, c#,

ruby, javaScript

● integração: rest, soap

● persistência

● sistemas distribuídos

● XHTML

● CSS

● JavaScript

● Tratamento de

imagens

back-end front-end

Desenvolvimento WEB

● Componet Based○ Simplicidade no desenvolvimento e aprendizado;○ Conjunto de componentes visuais. Semelhante ao

que acontece no desktop;○ Exige pouco conhecimento de html+css+javascript

● Exemplos:○ JSF○ .NET

Desenvolvimento WEB

● Action Based○ Framework MVC○ Baseado em ações○ Não possuem componentes visuais;○ Maior flexibilidade no desenvolvimento;○ Exige mais conhecimento HTML+CSS+JavaScript

● Exemplos○ VRaptor○ Spring MVC○ RubyOnRails○ ASP NET MVC

Uma proposta

● Action Based● Rest

● HTML 5● CSS 3● JavaScript

VRaptor

BootStrap

VRaptor

"VRaptor 3 é uma framework MVC para web focado no desenvolvimento ágil."

Por que VRaptor

Por onde começar

http://vraptor.caelum.com.br

http://www.caelum.com.br/apostilas/

Padrões

Configuração por convenção

Padrão Controller

Padrão View

● Segue Padrão JSP com HTML normal● name dos componentes são os atributos das

classes

Rest

A Transferência de Estado Representacional (Representational State Transfer) ou somente (REST) é uma técnica de engenharia de software para sistemas hipermídia distribuídos como a World Wide Web.

Roy Fielding "A REST (Transferência do Estado Representacional) é pretendida como uma imagem do design da aplicação se comportará: uma rede de websites (um estado virtual), onde o usuário progride com uma aplicação selecionando as ligações (transições do estado), tendo como resultado a página seguinte (que representa o estado seguinte da aplicação) que está sendo transferida ao usuário e apresentada para seu uso."

REST

● REST é um conjunto de restrições que define um padrão arquitetural;

● Permitir o endereçamento dos recursos do seu sistema de uma forma padronizada;

● Protocolo HTTP não somente como uma maneira de transmitir dados;

REST

● Triangulo REST○ Substantivos: Recursos○ Verbos: Operações

■ GET■ POST■ PUT■ DELETE■ HEAD, OPTIONS e TRACE

○ Content type: Representação

REST + VRaptor

REST na VIEW

Quais são os ganhos?

● Menor acoplamento da view com controller

● O programador web não precisa conhecer os

métodos presentes na classe Java

● Trabalho somente com os componentes HTML

E a VIEW ?

Antes dos ajustes profissionais

Após ajustes profissionais

Devo me preocupar com...

O que vai acessar meu sistema?

● computador

● tablet

● smartphone

● televisão

● videogame

Devo me preocupar com:

Qual a difrença entre os dispositos?

● Desempenho○ Processamento

● Tamanho da tela○ Resolução

● Forma de acesso○ recursos de dados

HTML5 e CSS3

Quem criou isso?

Em 2004;

● Mozilla● Apple● Opera

HTML5

Quais são as novidades?

● Novos tipos de elementos● Audio e Vídeo● Canvas● SVG● e muito mais

CSS3

Quais são as novidades?

● Cantos arredondados● Sombras● Gradiente● Transparência● Canvas● Uso de fonts específicas

oba... posso usar tudo isso?depende...

a palavra é MODERAÇÃO

mas porque?

● HTML5 e CSS3 estão sendo desenvolvidos e homologados por partes.

● Browsers antigos

● Diferentes motores de renderização

Motores de Renderização

Motor Browsers

Webkit Safari e Google Chrome

Geko Firefox, Mozilla e Camino

Trident Internet Explorer 4 ao 9

Presto Opera ao 10

HTML/CSS/JavaScript

Bootstrap

Tudo começa em:

http://twitter.github.com/bootstrap

Perguntas?

André Luiz Forchesatto http://about.me/andreforchesatto

Maurício Bertéhttp://about.me/mauricioberte

Projeto exemplo: https://github.com/forchesatto/opineEvento