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.
Introdução ao desenvolvimento web com WebMatrix e Razor
1.
2. Quem sou eu
● Vitor Reis - Avatar
● Analista de Sistemas Pleno - Pearson
● Sócio - NewGT Desenvolvimento Mobile
● Blog: www.vitorreis7.wordpress.com
2
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
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
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