Programando razor

901 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
901
No SlideShare
0
A partir de incorporações
0
Número de incorporações
340
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Programando razor

  1. 1. Quem sou eu● Vitor Reis - Avatar● Analista de Sistemas Pleno - Pearson● Sócio - NewGT Desenvolvimento Mobile● Blog: www.vitorreis7.wordpress.com2
  2. 2. Ferramentas exploradas nestaapresentação● WebMatrix○ IIS Express○ ASP.Net Web Pages○ SQL Server Compact● Razor3
  3. 3. Microsoft WebMatrix● Criar● Customizar● Publicar● Servidor Web● Banco de dados● Ferramenta dedesenvolvimento4
  4. 4. WebMatrix Versus Visual StudioEu <3 Web Apps!Eu apenaspreciso de umaferramenta emque seja fácil deconfigurar,customizar epublicarEu quero construirweb sites sozinho,com umaferramenta fácil ecom recursos deum frameworkEu sou umdesenvolvedorprofissional e crioweb sitescomplexos,grandes eescaláveis comum time dedesenvolvimento 5
  5. 5. O que é HTML?● HTML é uma linguagem para descreverpáginas web.● HTML vem de Hyper Text Markup Language● Uma linguagem de marcação é um conjuntode tags● As tags definem o conteúdo da página6
  6. 6. O que é CSS?● CSS vem de Cascading Style Sheet.● Um estilo define como o navegador irá exibirum elemento HTML.● Folhas de estilo "externas" podem lhe fazeraumentar a produtividade.● Folhas de estilo "externas" sãoarmazenadas em arquivos CSS.7
  7. 7. Uma breve história das plataformas dedesenvolvimento WEB da Microsoft● Active Server Pages - ASP● ASP.NET Web Forms● ASP.NET MVC● WebMatrix8
  8. 8. Active Server Pages - (ASP)Código e marcação são criados em um únicoarquivo, em que cada arquivo fisicocorresponde a uma página no website.Os desenvolvedores queriam mais:● Reutilização de código● Separação de Conceitos● Facilitar a utilização dosprincípios de POO9
  9. 9. Abordagem baseada em páginaSeparação em 2 camadas: Código e MarcaçãoÉ considerado por alguns desenvolvedorescomo uma abstração de HTML, Javascript eCSS.ASP.Net Web Forms - 200210
  10. 10. ASP.NET MVC - 2008● Total abandono da abordagem baseada empáginas● Em vez de arquivos de marcação, as viewstem a responsabilidade de gerar o HTMLpara o usuário.● Permite que o desenvolvedor escolha alinguagem que usará na view, Razoremergiu como a mais popular.11
  11. 11. MVC - Padrão de ProjetoO modelo MVC define aplicações com 3camadas principais:A camada de negócio (Model logic)A camada de exibição (View logic)O controle de entradas (Controller logic)12
  12. 12. MVC - Padrão de Projeto
  13. 13. ComparaçãoWEB FORMS6 Marcações detransiçãoPHP2 Marcações detransição1 FunçãoRazor2 Marcações detransição
  14. 14. Objetivos do RazorCompacto, Expressivo e FluídoFácil de aprenderNão é uma nova linguagemFunciona em qualquer editor de textoPossuí um Intellisense muito bomView Engine!15
  15. 15. Hello, Razor!O código:<div>Hello world, essa página foi renderizadaem @DateTime.Now</div>Produz algo do tipo:<div>Hello world, essa página foi renderizadaem 12/7/1941 7:38:00 AM</div>16
  16. 16. Diferenciando Código de MarcaçãoCode NuggetsExpressões simples que são avaliadas erenderizadas 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
  17. 17. Diferenciando Código de MarcaçãoCode BlocksContém somente código, em vez de umacombinação de marcação e código:@{LayoutPage = "~/Views/Shared/_Layout.cshtml";View.Title = "Detalhes do produto " + Model.ProductName;}18
  18. 18. Comentários com Razor@*@{LayoutPage = "~/Views/Shared/_Layout.cshtml";View.Title = "Inicio";}*@19
  19. 19. Razor Helpers● Web Grid● Web Graphics● Google Analytics● Facebook Integration● Twitter Integration● Sending Email● Validation20
  20. 20. Razor e Microsoft WebMatrixDemonstração 21
  21. 21. Criando um banco de dadosPopular o banco com dados22
  22. 22. Exibindo os dados do bancoAdicionar Post- Uma página que você usará para adicionarnovos "posts" no blog.Post- Uma página que exibe todos os dados dedeterminado post.Página Inicial- Contém uma lista com os posts maisrecentes e link para a visualização completa. 23
  23. 23. Adicionar livroFormulárioGerenciando os dados no POST do formulárioValidando os dados24
  24. 24. Finalizando hands onAplicar CSS de layoutAplicar CSS no formulario25
  25. 25. Referências - Leitura sugerida
  26. 26. Referências - Leitura sugerida27
  27. 27. Perguntas - EncerramentoMuito Obrigado!FB: facebook.com/vitorreis7email: vitorreis@outlook.comBlog: www.vitorreis7.wordpress.com28

×