O documento apresenta as ferramentas Microsoft WebMatrix e Razor para desenvolvimento web, descrevendo suas funcionalidades como criação, customização e publicação de sites e aplicativos. Apresenta também uma breve história das plataformas da Microsoft como ASP, ASP.NET Web Forms e MVC.

2. Quem sou eu
● Vitor Reis - Avatar
● Analista de Sistemas Pleno - Pearson
● Sócio - NewGT Desenvolvimento Mobile
● Blog: www.vitorreis7.wordpress.com
2

3. Ferramentas exploradas nesta
apresentação
● WebMatrix
○ IIS Express
○ ASP.Net Web Pages
○ SQL Server Compact
● Razor
3

4. Microsoft WebMatrix
● Criar
● Customizar
● Publicar
● Servidor Web
● Banco de dados
● Ferramenta de
desenvolvimento
4

5. WebMatrix Versus Visual Studio
Eu <3 Web Apps!
Eu apenas
preciso de uma
ferramenta em
que seja fácil de
configurar,
customizar e
publicar
Eu quero construir
web sites sozinho,
com uma
ferramenta fácil e
com recursos de
um framework
Eu sou um
desenvolvedor
profissional e crio
web sites
complexos,
grandes e
escaláveis com
um time de
desenvolvimento 5

6. O que é HTML?
● HTML é uma linguagem para descrever
páginas web.
● HTML vem de Hyper Text Markup Language
● Uma linguagem de marcação é um conjunto
de tags
● As tags definem o conteúdo da página
6

7. O que é CSS?
● CSS vem de Cascading Style Sheet.
● Um estilo define como o navegador irá exibir
um elemento HTML.
● Folhas de estilo "externas" podem lhe fazer
aumentar a produtividade.
● Folhas de estilo "externas" são
armazenadas em arquivos CSS.
7

8. Uma breve história das plataformas de
desenvolvimento WEB da Microsoft
● Active Server Pages - ASP
● ASP.NET Web Forms
● ASP.NET MVC
● WebMatrix
8

9. Active Server Pages - (ASP)
Código e marcação são criados em um único
arquivo, em que cada arquivo fisico
corresponde a uma página no website.
Os desenvolvedores queriam mais:
● Reutilização de código
● Separação de Conceitos
● Facilitar a utilização dos
princípios de POO
9

10. Abordagem baseada em página
Separação em 2 camadas: Código e Marcação
É considerado por alguns desenvolvedores
como uma abstração de HTML, Javascript e
CSS.
ASP.Net Web Forms - 2002
10

11. ASP.NET MVC - 2008
● Total abandono da abordagem baseada em
páginas
● Em vez de arquivos de marcação, as views
tem a responsabilidade de gerar o HTML
para o usuário.
● Permite que o desenvolvedor escolha a
linguagem que usará na view, Razor
emergiu como a mais popular.
11

12. MVC - Padrão de Projeto
O modelo MVC define aplicações com 3
camadas principais:
A camada de negócio (Model logic)
A camada de exibição (View logic)
O controle de entradas (Controller logic)
12

13. MVC - Padrão de Projeto

14. Comparação
WEB FORMS
6 Marcações de
transição
PHP
2 Marcações de
transição
1 Função
Razor
2 Marcações de
transição

15. Objetivos do Razor
Compacto, Expressivo e Fluído
Fácil de aprender
Não é uma nova linguagem
Funciona em qualquer editor de texto
Possuí um Intellisense muito bom
View Engine!
15

16. Hello, Razor!
O código:
<div>Hello world, essa página foi renderizada
em @DateTime.Now</div>
Produz algo do tipo:
<div>Hello world, essa página foi renderizada
em 12/7/1941 7:38:00 AM</div>
16

17. Diferenciando Código de Marcação
Code Nuggets
Expressões simples que são avaliadas e
renderizadas em uma linha, por exemplo:
Identifique-se, efetue o @Html.ActionLink("Login", "Login")
Será renderizado como:
Identifique-se, efetue o <a href="/Login">Login</a>
17

18. Diferenciando Código de Marcação
Code Blocks
Contém somente código, em vez de uma
combinação de marcação e código:
@{
LayoutPage = "~/Views/Shared/_Layout.cshtml";
View.Title = "Detalhes do produto " + Model.ProductName;
}
18

19. Comentários com Razor
@*
@{
LayoutPage = "~/Views/Shared/_Layout.cshtml";
View.Title = "Inicio";
}
*@
19

20. Razor Helpers
● Web Grid
● Web Graphics
● Google Analytics
● Facebook Integration
● Twitter Integration
● Sending Email
● Validation
20

21. Razor e Microsoft WebMatrix
Demonstração 21

22. Criando um banco de dados
Popular o banco com dados
22

23. Exibindo os dados do banco
Adicionar Post
- Uma página que você usará para adicionar
novos "posts" no blog.
Post
- Uma página que exibe todos os dados de
determinado post.
Página Inicial
- Contém uma lista com os posts mais
recentes e link para a visualização completa. 23

24. Adicionar livro
Formulário
Gerenciando os dados no POST do formulário
Validando os dados
24

25. Finalizando hands on
Aplicar CSS de layout
Aplicar CSS no formulario
25

26. Referências - Leitura sugerida

27. Referências - Leitura sugerida
27

28. Perguntas - Encerramento
Muito Obrigado!
FB: facebook.com/vitorreis7
email: vitorreis@outlook.com
Blog: www.vitorreis7.wordpress.com
28