Quem sou eu● Vitor Reis - Avatar● Analista de Sistemas Pleno - Pearson ● Sócio - NewGT Desenvolvimento Mobile● Blog: www.vitorreis7.wordpress.com
2
Ferramentas exploradas nesta apresentação
● WebMatrix○ IIS Express○ ASP.Net Web Pages○ SQL Server Compact
● Razor
3
Microsoft WebMatrix
● Criar● Customizar● Publicar● Servidor Web● Banco de dados● Ferramenta de
desenvolvimento
4
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
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
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
Uma breve história das plataformas de desenvolvimento WEB da Microsoft
● Active Server Pages - ASP● ASP.NET Web Forms● ASP.NET MVC● WebMatrix
8
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
Abordagem baseada em páginaSeparaçã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
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
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
MVC - Padrão de Projeto
ComparaçãoWEB FORMS6 Marcações de transição
PHP2 Marcações de transição1 Função
Razor2 Marcações de transição
Objetivos do Razor
Compacto, Expressivo e FluídoFácil de aprenderNão é uma nova linguagemFunciona em qualquer editor de textoPossuí um Intellisense muito bom
View Engine!15
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
Diferenciando Código de Marcação
Code NuggetsExpressõ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
Diferenciando Código de Marcação
Code BlocksConté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
Comentários com Razor
@* @{ LayoutPage = "~/Views/Shared/_Layout.cshtml"; View.Title = "Inicio";
}*@
19
Razor Helpers
● Web Grid● Web Graphics● Google Analytics● Facebook Integration● Twitter Integration● Sending Email● Validation
20
Razor e Microsoft WebMatrix
Demonstração21
Criando um banco de dados
Popular o banco com dados
22
Exibindo os dados do bancoAdicionar 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
Adicionar livro
Formulário
Gerenciando os dados no POST do formulário
Validando os dados
24
Finalizando hands on
Aplicar CSS de layout
Aplicar CSS no formulario
25
Referências - Leitura sugerida
Referências - Leitura sugerida
27
Perguntas - Encerramento
Muito Obrigado!
FB: facebook.com/vitorreis7email: [email protected]
Blog: www.vitorreis7.wordpress.com
28