1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web...

31
1 Técnicas de Implementação de Técnicas de Implementação de páginas web páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage: Planeamento Microsoft FrontPage: Planeamento e criação de um e criação de um Web site Web site Operações com Web Sites: criar, abrir e Operações com Web Sites: criar, abrir e fechar fechar Modos de Visualização de website e de uma Modos de Visualização de website e de uma página Web página Web

Transcript of 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web...

Page 1: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

11

Técnicas de Implementação de páginas webTécnicas de Implementação de páginas web Criação de Páginas WebCriação de Páginas Web Microsoft FrontPage: Planeamento e criação Microsoft FrontPage: Planeamento e criação de um de um Web site Web site Operações com Web Sites: criar, abrir e fecharOperações com Web Sites: criar, abrir e fechar Modos de Visualização de website e de uma página Modos de Visualização de website e de uma página WebWeb

Page 2: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

22

Técnicas de Implementação Técnicas de Implementação de páginas webde páginas web

Page 3: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

33

Linguagens de Programação deLinguagens de Programação de páginas Web páginas Web

Java e Java Script Java e Java Script Visual Basic ScriptVisual Basic ScriptDHTML – Dynamic HTMLDHTML – Dynamic HTMLCSS – Cascading Style SheetsCSS – Cascading Style SheetsASP - Active Server Pages ASP - Active Server Pages PHP - Hypertext Preprocesor PHP - Hypertext Preprocesor JSP – Java Server PagesJSP – Java Server Pages

HTMLHTML

Page 4: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

44

Editores de páginas webEditores de páginas web

O Bloco de Notas é um processador de texto simples que permite inserir e formatar conteúdos utilizando o código HTML.

Microsoft FrontPage

Os editores de criação e gestão de páginas Web permitem inserir e formatar o conteúdo de forma gráfica.

Macromedia DreamweaverAdobe GoAlive

Page 5: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

55

O Paint Shop Pro é um programa que permite fazer tratamento de imagens estáticas. É um editor de gráficos bitmap e vectoriais.

Editores de imagens eEditores de imagens e efeitos especiais efeitos especiais

O PhotoShop é um editor de imagem profissional que permite editar imagens, tratar e digitalizar imagens

estáticas. Também é possível manipular as imagens de todas as maneiras possíveis trabalhando com as mais utilizadas extensões de arquivos gráficos. Com a possibilidade de se instalar plug-ins que estão disponíveis para download em toda Internet permite também muita flexibilidade na escolha dos filtros e acessórios em geral.

Page 6: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

66

O Corel Draw é um programa que permite manipular imagens vectoriais. Cria imagens usando formas de objectos armazenados internamente como equações matemáticas (vector), bem diferente das aplicações que utilizam bitmap, uma imagem composta pôr uma série de pontos.

Editores de imagens eEditores de imagens e efeitos especiais efeitos especiais

Page 7: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

77

Ulead GIF Animator é um software de produção de imagens animadas. É a ferramenta que permite manipular imagens do tipo GIF Animado oferecendo diversos plug-ins e opcionais que fazem a diferença na hora de animar uma imagem.

Ulead Cool 3D é um software que gera animações tridimensionais. Com esta ferramenta pode-se criar a forma gráfica que desejar com múltiplas características na criação e edição das imagens. É possível introduzir objectos tridimensionais nos projectos como esferas, cones, cilindros, cubos, etc....

Editores e programas de animação Editores e programas de animação gráficagráfica

O Macromedia Flash é um programa que permite criar animações interactivas dimensionáveis e integrativas para a Web. É possível criar logotipos com animação e com controles direccionáveis para navegação em Web Sites. Com a utilização do flash a interactividade com o utilizador torna-se atractivo e a aceitação e a aprovação são quase imediatas. É uma ferramenta ideal para usar a criatividade devido à eficiência e flexibilidade.

Page 8: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

88

O WS FTP é um programa simples que permite fazer a ligação a um servidor de páginas Web. Portanto, o programa faz a conexão com o servidor FTP e mostra numa das janelas (provavelmente será a da direita) um directório de ficheiros, e na outra janela os directórios do disco rígido, onde os ficheiros poderão ser descarregados.

O Cute FTP é um programa de transferência de ficheiros que permite retomar um download interrompido. Basicamente, o programa faz a conexão com o servidor FTP e mostra na janela da direita um directório de ficheiros, e na da esquerda os directórios do disco rígido, onde os ficheiros poderão ser descarregados. Pode-se navegar pelos directórios, tanto do computador como do servidor remoto, da mesma forma como se faz no Windows Explorer.

O CRT-Secure é um programa que permite a transferência segura de ficheiros pois fornece as potencialidades de transferência seguras, do início de uma sessão e dos dados do ShellT seguro (SSH) numa aplicação em que pode usar o telnet e conexões de série. CRT-Secure inclui a utilidade VCP para transferências de ficheiros encriptados SSH2.

Ferramentas e UtilitáriosFerramentas e Utilitários

Page 9: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

99

Criação de Páginas WebCriação de Páginas Web

Page 10: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1010

Conceitos de ergonomia e amigabilidade Conceitos de ergonomia e amigabilidade de uma página Webde uma página Web

ErgonomiaErgonomia - - A A ergonomiaergonomia é a disciplina científica relacionada é a disciplina científica relacionada com o entendimento das interacções entre seres humanos e outros com o entendimento das interacções entre seres humanos e outros elementos de um sistema, e também é a profissão que aplica teoria, elementos de um sistema, e também é a profissão que aplica teoria, princípios, dados e métodos para projectar a fim de optimizar o bem-princípios, dados e métodos para projectar a fim de optimizar o bem-estar humano e o desempenho geral de um sistema. estar humano e o desempenho geral de um sistema.

Usabilidade - Usabilidade - é sinonimo de facilidade de uso. Se um produto é sinonimo de facilidade de uso. Se um produto é fácil de usar, o utilizador tem maior produtividade: aprende mais é fácil de usar, o utilizador tem maior produtividade: aprende mais rápido a usar, memoriza as operações e comete menos erros. rápido a usar, memoriza as operações e comete menos erros. Relativamente, a uma página web refere-se à simplicidade e Relativamente, a uma página web refere-se à simplicidade e facilidade com que um website pode ser utilizadofacilidade com que um website pode ser utilizado

WEB

Page 11: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1111

Conceitos de ergonomia e amigabilidade Conceitos de ergonomia e amigabilidade de uma página Webde uma página Web

A usabilidade está relacionada com os estudos de A usabilidade está relacionada com os estudos de Ergonomia e e da da Interação Homem-computador..

Assim, o site tem de ser agradável, acessível a todos os Assim, o site tem de ser agradável, acessível a todos os utilizadores, mesmo àqueles que possuam apenas os requisitos utilizadores, mesmo àqueles que possuam apenas os requisitos “mínimos” do sistema informático.“mínimos” do sistema informático.

Page 12: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1212

Conceitos de HTML e HipertextoConceitos de HTML e Hipertexto

O que é o HTML?O que é o HTML?

Para se publicar informação de distribuição global, é Para se publicar informação de distribuição global, é necessário utilizar-se uma linguagem de compreensão necessário utilizar-se uma linguagem de compreensão universal, uma espécie de Língua de publicação “Mãe”, a universal, uma espécie de Língua de publicação “Mãe”, a qual possa ser potencialmente usada e compreendida por qual possa ser potencialmente usada e compreendida por todos os computadores. O HTML é a linguagem de todos os computadores. O HTML é a linguagem de publicação usada pela World Wide Web (do Inglês: Hyper publicação usada pela World Wide Web (do Inglês: Hyper Text Markup Language).Text Markup Language).

O conceito de Hipertexto é muito simples: certos itens de O conceito de Hipertexto é muito simples: certos itens de um documento contém uma ligação a outra zona do mesmo um documento contém uma ligação a outra zona do mesmo documento, ou a outros documentos.documento, ou a outros documentos.

Page 13: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1313

Conceitos de HTML e HipertextoConceitos de HTML e Hipertexto

O HTML dá a possibilidade de:O HTML dá a possibilidade de:– Publicar documentos Online contendo cabeçalhos, texto, quadros e Publicar documentos Online contendo cabeçalhos, texto, quadros e

tabelas, listas, fotos, etc. tabelas, listas, fotos, etc. – Recuperar ou retirar informações Online, por intermédio de ligações Recuperar ou retirar informações Online, por intermédio de ligações

de hipertexto, clicando num botão. de hipertexto, clicando num botão. – Concepção de formulários para a realização de transacções com Concepção de formulários para a realização de transacções com

serviços remotos, para o uso na busca de informação, realização de serviços remotos, para o uso na busca de informação, realização de reservas, encomenda de produtos, etc. reservas, encomenda de produtos, etc.

– Inclusão directa nos documentos de folhas de difusão, de vídeo-Inclusão directa nos documentos de folhas de difusão, de vídeo-clips, de spots ou clips sonoros e de outras aplicações. clips, de spots ou clips sonoros e de outras aplicações.

► Página Web – documento multimédia que contém hiperligações

►Sitio Web – conjunto de páginas Web

► Web – conjunto de sitios Web

Conceitos necessários: Conceitos necessários:

Page 14: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1414

Microsoft FrontPage:Microsoft FrontPage:

O ambiente de trabalhoO ambiente de trabalho

Page 15: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1515

PROGRAMA DE EDIÇÃO WEB: FRONTPAGE

Janela da aplicação

Barras de ferramentas e painel

Barra de menus

Page 16: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1616

Barra de título

Janela de edição de páginas Web

Painel de tarefas

Barra de menus

Selectores do modo de visualização

Barra de ferramentas Padrão

Barra de ferramentas Formatação

Janela da AplicaçãoJanela da Aplicação

Page 17: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1717

Barra de menus

Barra de ferramentas Padrão

Barra de ferramentas Formatação

Barra de ferramentas Efeitos DHTML

Barra de ferramentas Imagens

Barra de ferramentas Desenho

Barra de ferramentas WordArt

Painel de tarefas

Barra de estado

BARRAS DE FERRAMENTAS E O PAINEL

Page 18: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1818

BARRA DE MENUS

Page 19: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

1919

Microsoft FrontPage:Microsoft FrontPage:Planeamento e criação de Planeamento e criação de

um um Web siteWeb site

Page 20: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2020

Planeamento de um sitio Planeamento de um sitio WebWeb

É a primeira tarefa a realizar antes de utilizar o É a primeira tarefa a realizar antes de utilizar o FrontPageFrontPage

Tipos de perguntas que se deve responder sobre o Tipos de perguntas que se deve responder sobre o sitio Web a implementar:sitio Web a implementar:– Qual é o objectivo da página?Qual é o objectivo da página?

– A quem se dirige (público-alvo)?A quem se dirige (público-alvo)?

– Que informações deve conter?Que informações deve conter?

– Que recursos gráficos deve conter?Que recursos gráficos deve conter?

– Que estilo gráfico de página é mais adequado?Que estilo gráfico de página é mais adequado?

Page 21: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2121

Planeamento de um sitio Planeamento de um sitio WebWeb

Necessário definir os objectivos da página Necessário definir os objectivos da página definição da estrutura, conteúdos e manutenção.definição da estrutura, conteúdos e manutenção.Cada página deve conter informações-base para ser Cada página deve conter informações-base para ser autónoma e consistente com as outras páginas.autónoma e consistente com as outras páginas.– Quem é o autor, email de contacto Quem é o autor, email de contacto – Que assunto se trataQue assunto se trata– Quando foi feita e/ou data da última actualizaçãoQuando foi feita e/ou data da última actualização

Apresentação gráfica do sítioApresentação gráfica do sítio– Ícones claros e consistentesÍcones claros e consistentes– Identificação esquemática dos menusIdentificação esquemática dos menus– Botões de navegaçãoBotões de navegação– Titulos, subtitulos, cabeçalhos, rodapés e links bem vísiveisTitulos, subtitulos, cabeçalhos, rodapés e links bem vísiveis

Page 22: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2222

Planeamento de um sitio Planeamento de um sitio WebWeb

A informação deve estar disponível no mais curto A informação deve estar disponível no mais curto período de tempo percorrendo o menor número de período de tempo percorrendo o menor número de etapas.etapas.– Informação hierarquizadaInformação hierarquizada

– Menus com poucos linksMenus com poucos links

– Ecrã não sobrecarregado (texto/imagens) Ecrã não sobrecarregado (texto/imagens) abertura das abertura das páginaspáginas

– Navegação do sítioNavegação do sítio

Padrão consistente em todas as páginasPadrão consistente em todas as páginas

Page 23: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2323

Planeamento de um sitio Planeamento de um sitio WebWeb

Hierarquizar a informaçãoHierarquizar a informação– Divisão da informação a incluir em cada páginaDivisão da informação a incluir em cada página

– Estabelecer a hierarquia entre as páginasEstabelecer a hierarquia entre as páginas

– Determinar as ligações entre as páginasDeterminar as ligações entre as páginas

Estrutura do sitioEstrutura do sitio

Page 24: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2424

Planeamento de um sitio Planeamento de um sitio WebWeb

InformaçãoInformação– Na página principal, títulos e menus visíveis e acessíveis na Na página principal, títulos e menus visíveis e acessíveis na

parte superior da páginaparte superior da página

– Evitar páginas extensasEvitar páginas extensas

– Dividir a informação por várias páginasDividir a informação por várias páginas

– Introduzir hiperligaçõesIntroduzir hiperligações

– Página especifica com linksPágina especifica com links

Estrutura do sitioEstrutura do sitio

Page 25: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2525

Planeamento de um sitio Planeamento de um sitio WebWeb

É a identidade visual própria para manter em todas as É a identidade visual própria para manter em todas as páginas páginas definição do aspecto visual da página definição do aspecto visual da página

Aspectos a ter em conta:Aspectos a ter em conta:– Cabeçalhos e rodapésCabeçalhos e rodapés– Títulos e subtítulosTítulos e subtítulos– Legibilidade do textoLegibilidade do texto– Cores (3 ou menos)Cores (3 ou menos)– Objectos MultimédiaObjectos Multimédia

Imagens (GIF,JPG,PNG)Imagens (GIF,JPG,PNG)

Sons (Wave, Mpeg, MIDI)Sons (Wave, Mpeg, MIDI)

Vídeos (Mpeg, AVI, MOV)Vídeos (Mpeg, AVI, MOV)

Consistência do sitioConsistência do sitio

Page 26: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2626

Criação e Gestão do sitio WebCriação e Gestão do sitio Web

Gestão do sitio Web – pessoa única para gerirGestão do sitio Web – pessoa única para gerir– Deve:Deve:

Responder aos emails dos utilizadoresResponder aos emails dos utilizadores

Assegurar o funcionamento de grupos de discussão (se existir)Assegurar o funcionamento de grupos de discussão (se existir)

Assegurar o funcionamento de chats (se existir)Assegurar o funcionamento de chats (se existir)

Interagir com os utilizadoresInteragir com os utilizadores

– Email sempre visível no rodapé da páginaEmail sempre visível no rodapé da página

– Actualizar frequentemente o sitio WebActualizar frequentemente o sitio Web

Page 27: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2727

Criação e Gestão do sitio WebCriação e Gestão do sitio Web

Criação, abertura e guarda de páginasCriação, abertura e guarda de páginas– Menu Ficheiro, opção Novo, no painel Página em BrancoMenu Ficheiro, opção Novo, no painel Página em Branco

– Na barra de ferramentas – Botão Nova PáginaNa barra de ferramentas – Botão Nova Página

Page 28: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2828

Criação e Gestão do sitio WebCriação e Gestão do sitio Web

Criação, abertura e guarda de páginasCriação, abertura e guarda de páginas– Na barra de ferramentas – seta do Botão Nova PáginaNa barra de ferramentas – seta do Botão Nova Página

Page 29: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

2929

Criação e Gestão do sitio WebCriação e Gestão do sitio Web

Criação, abertura e guarda de páginasCriação, abertura e guarda de páginas– Menu Ficheiro, opção Abrir, no painel Página em BrancoMenu Ficheiro, opção Abrir, no painel Página em Branco

– Na barra de ferramentas – Botão AbrirNa barra de ferramentas – Botão Abrir

Page 30: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

3030

Criação e Gestão do sitio WebCriação e Gestão do sitio Web

Criação, abertura e guarda de páginasCriação, abertura e guarda de páginas– Menu Ficheiro, opção Guardar, no painel Página em BrancoMenu Ficheiro, opção Guardar, no painel Página em Branco

– Na barra de ferramentas – Botão GuardarNa barra de ferramentas – Botão Guardar

Page 31: 1 Técnicas de Implementação de páginas web Técnicas de Implementação de páginas web Criação de Páginas Web Criação de Páginas Web Microsoft FrontPage:

3131

Realizar Actividade 1Realizar Actividade 1