Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma...
Transcript of Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma...
![Page 1: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/1.jpg)
Academia de Ensino SuperiorProf. André Morais
Desenvolvimento de Aplicações Web na
plataforma Microsoft
Elaborando o design
![Page 2: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/2.jpg)
Academia de Ensino SuperiorProf. André Morais
Elaborando o design• Objetivos
– Como iniciar o processo de design de um site
– Entender o conceito de Master page e Content Page
– Como construir um mapa
– Utilizar um arquivo de configuração (Web.config)
![Page 3: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/3.jpg)
Academia de Ensino SuperiorProf. André Morais
Elaborando o design• Em um ambiente profissional, é preciso
seguir alguns pontos antes do inicio do desenvolvimento:
– Desenvolver o modelo funcional
– Identificar as tecnologias que poderão ser utilizadas
– Desenvolver uma especificação técnica
![Page 4: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/4.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page• Um web site com um bom design inclui,
normalmente, os seguintes elementos:
– Um cabeçalho e um menu para todas as páginas
– Links a esquerda para navegação (explorer)
– Um rodapé com informações de copyright
![Page 5: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/5.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Uma página “Master” define um layout padrão para todas as páginas baseadas nela.
• Uma página “Content” é baseada na “Master”
![Page 6: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/6.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Criando uma Master Page
![Page 7: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/7.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Uma Master Page irá conter:
– HTML básico
– <%@master ... %> na primeira linha
– Uma tag <asp:ContentPlaceHolder> com um ID
![Page 8: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/8.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Criando uma Content Page
![Page 9: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/9.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Um Content Page irá conter:
– <%@ page MasterPageFile= ... %> na primeira linha
– Uma tag <asp:content>
– NÃO é preciso definir o corpo do HTML!!
![Page 10: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/10.jpg)
Academia de Ensino SuperiorProf. André Morais
Master Page e Content Page
• Outras características:
– Master Pages em vários níveis
– Master Pages com múltiplos conteúdos
![Page 11: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/11.jpg)
Academia de Ensino SuperiorProf. André Morais
Mapa
• Criando um mapa
• Acrescentando controles de navegação
![Page 12: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/12.jpg)
Academia de Ensino SuperiorProf. André Morais
Elaborando o design
• Boas práticas para o design de um site:
– Separe a apresentação da informação
– Mantenha um visual consistente
– Mantenha o site simples para navegação
![Page 13: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/13.jpg)
Academia de Ensino SuperiorProf. André Morais
Exercício
• Rent A Car
– Você irá desenvolver um web-site para uma empresa que presta serviço de alugueis de carro;
– Inicialmente as seguintes páginas serão criadas...
![Page 14: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/14.jpg)
Academia de Ensino SuperiorProf. André Morais
Exercício
• Página principal
Menu
![Page 15: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/15.jpg)
Academia de Ensino SuperiorProf. André Morais
Exercício
• Sobre a empresa
![Page 16: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/16.jpg)
Academia de Ensino SuperiorProf. André Morais
Exercício
• Tarifas
• Dica: utilize o recurso de tabelas disponível no menu Layout
![Page 17: Academia de Ensino Superior Prof. André Morais Desenvolvimento de Aplicações Web na plataforma Microsoft Elaborando o design.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc181497959413d8f35f4/html5/thumbnails/17.jpg)
Academia de Ensino SuperiorProf. André Morais
Exercício
• Contato