academia de ensino superior prof. andré morais desenvolvimento de aplicações web na plataforma...

Academia de Ensino SuperiorProf. André Morais

Desenvolvimento de Aplicações Web na

plataforma Microsoft

Elaborando o design

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)

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

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

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”

Academia de Ensino SuperiorProf. André Morais

Master Page e Content Page

• Criando uma Master Page

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

Academia de Ensino SuperiorProf. André Morais

Master Page e Content Page

• Criando uma Content Page

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!!

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

Academia de Ensino SuperiorProf. André Morais

Mapa

• Criando um mapa

• Acrescentando controles de navegação

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

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...

Academia de Ensino SuperiorProf. André Morais

Exercício

• Página principal

Menu

Academia de Ensino SuperiorProf. André Morais

Exercício

• Sobre a empresa

Academia de Ensino SuperiorProf. André Morais

Exercício

• Tarifas

• Dica: utilize o recurso de tabelas disponível no menu Layout

Academia de Ensino SuperiorProf. André Morais

Exercício

• Contato