O documento discute o desenvolvimento web usando diferentes frameworks como VRaptor e Spring MVC combinados com REST, HTML5 e CSS3. Ele também introduz o Bootstrap como uma forma de criar interfaces responsivas com esses padrões sem esforço adicional.

1. Dividindo
responsabilidades com
VRaptor, Rest, HTML5 e
CSS3
André Luiz Forchesatto e Maurício Berté

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

3. Multidisciplinaridade
back-end front-end
● java, php, c++, c#, ● XHTML
ruby, javaScript ● CSS
● integração: rest, soap ● JavaScript
● persistência ● Tratamento de
● sistemas distribuídos imagens

4. 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

5. 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

6. Uma proposta
● Action Based VRaptor
● Rest
● HTML 5
● CSS 3 BootStrap
● JavaScript

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

8. Por que VRaptor

9. Por onde começar
http://vraptor.caelum.com.br
http://www.caelum.com.br/apostilas/

10. Padrões
Configuração por convenção

11. Padrão Controller

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

13. 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."

14. 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;

15. REST
● Triangulo REST
○ Substantivos: Recursos
○ Verbos: Operações
■ GET
■ POST
■ PUT
■ DELETE
■ HEAD, OPTIONS e TRACE
○ Content type: Representação

16. REST + VRaptor

17. REST na VIEW

18. 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

19. E a VIEW ?

20. Antes dos ajustes
profissionais

21. Após ajustes profissionais

22. Devo me preocupar com...
O que vai acessar meu sistema?
● computador
● tablet
● smartphone
● televisão
● videogame

23. Devo me preocupar com:
Qual a difrença entre os dispositos?
● Desempenho
○ Processamento
● Tamanho da tela
○ Resolução
● Forma de acesso
○ recursos de dados

24. HTML5 e CSS3

25. Quem criou isso?
Em 2004;
● Mozilla
● Apple
● Opera

26. HTML5
Quais são as novidades?
● Novos tipos de elementos
● Audio e Vídeo
● Canvas
● SVG
● e muito mais

27. CSS3
Quais são as novidades?
● Cantos arredondados
● Sombras
● Gradiente
● Transparência
● Canvas
● Uso de fonts específicas

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

29. a palavra é MODERAÇÃO
mas porque?
● HTML5 e CSS3 estão sendo desenvolvidos e
homologados por partes.
● Browsers antigos
● Diferentes motores de renderização

30. 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

35. HTML/CSS/JavaScript
Bootstrap

36. Tudo começa em:
http://twitter.github.com/bootstrap

37. Perguntas?
André Luiz Forchesatto
http://about.me/andreforchesatto
Maurício Berté
http://about.me/mauricioberte
Projeto exemplo: https://github.
com/forchesatto/opineEvento