Transcript Criação de Páginas Web

 Técnicas de Implementação de páginas web
 Criação de Páginas Web
 Microsoft FrontPage: Planeamento e criação
de um Web site
 Operações com Web Sites: criar, abrir e fechar
 Modos de Visualização de website e de uma página
Web
1
Técnicas de Implementação
de páginas web
2
Linguagens de Programação de
páginas Web
HTML
 Java e Java Script
 Visual Basic Script
 DHTML – Dynamic HTML
 CSS – Cascading Style Sheets
 ASP - Active Server Pages
 PHP - Hypertext Preprocesor
 JSP – Java Server Pages
3
Editores 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
Macromedia Dreamweaver
Adobe GoAlive
Os editores de criação e gestão de páginas Web permitem inserir e formatar o
conteúdo de forma gráfica.
4
Editores de imagens e
efeitos especiais
O Paint Shop Pro é um programa que permite
fazer tratamento de imagens estáticas. É um
editor de gráficos bitmap e vectoriais.
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.
5
Editores de imagens e
efeitos especiais
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.
6
Editores e programas de animação
gráfica
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....
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.
7
Ferramentas e Utilitários
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. 8
Criação de Páginas Web
9
Conceitos de ergonomia e amigabilidade
de uma página Web
Ergonomia -
A ergonomia é a disciplina científica relacionada
com o entendimento das interacções entre seres humanos e outros
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 bemestar humano e o desempenho geral de um sistema.
WEB
Usabilidade -
é sinonimo de facilidade de uso. Se um produto é
fácil de usar, o utilizador tem maior produtividade: aprende mais
rápido a usar, memoriza as operações e comete menos erros.
Relativamente, a uma página web refere-se à simplicidade e
facilidade com que um website pode ser utilizado
10
Conceitos de ergonomia e amigabilidade
de uma página Web
A usabilidade está relacionada com os estudos de Ergonomia e
da Interação Homem-computador.
Assim, o site tem de ser agradável, acessível a todos os
utilizadores, mesmo àqueles que possuam apenas os requisitos
“mínimos” do sistema informático.
11
Conceitos de HTML e Hipertexto
O que é o HTML?
Para se publicar informação de distribuição global, é
necessário utilizar-se uma linguagem de compreensão
universal, uma espécie de Língua de publicação “Mãe”, a
qual possa ser potencialmente usada e compreendida por
todos os computadores. O HTML é a linguagem de
publicação usada pela World Wide Web (do Inglês: Hyper
Text Markup Language).
O conceito de Hipertexto é muito simples: certos itens de
um documento contém uma ligação a outra zona do mesmo
documento, ou a outros documentos.
12
Conceitos de HTML e Hipertexto
O HTML dá a possibilidade de:
– Publicar documentos Online contendo cabeçalhos, texto, quadros e
tabelas, listas, fotos, etc.
– Recuperar ou retirar informações Online, por intermédio de ligações
de hipertexto, clicando num botão.
– 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
reservas, encomenda de produtos, etc.
– Inclusão directa nos documentos de folhas de difusão, de vídeoclips, de spots ou clips sonoros e de outras aplicações.
Conceitos necessários:
► Página Web – documento multimédia que contém hiperligações
►Sitio Web – conjunto de páginas Web
► Web – conjunto de sitios Web
13
Microsoft FrontPage:
O ambiente de trabalho
14
PROGRAMA DE EDIÇÃO WEB: FRONTPAGE
Janela da aplicação
Barras de ferramentas e painel
Barra de menus
15
Janela da Aplicação
Barra de título
Barra de
ferramentas
Padrão
Barra de
ferramentas
Formatação
Barra de
menus
Painel de
tarefas
Janela de edição
de páginas Web
Selectores do
modo de
visualização
16
BARRAS DE FERRAMENTAS E O PAINEL
Barra de ferramentas Efeitos DHTML
Barra de menus
Barra de
ferramentas
Padrão
Barra de
ferramentas
Imagens
Barra de
ferramentas
Formatação
Barra de
ferramentas
Desenho
Painel de
tarefas
Barra de
ferramentas
WordArt
Barra de
estado
17
BARRA DE MENUS
18
Microsoft FrontPage:
Planeamento e criação de
um Web site
19
Planeamento de um sitio Web
É a primeira tarefa a realizar antes de utilizar o
FrontPage
Tipos de perguntas que se deve responder sobre o sitio
Web a implementar:
–
–
–
–
–
Qual é o objectivo da página?
A quem se dirige (público-alvo)?
Que informações deve conter?
Que recursos gráficos deve conter?
Que estilo gráfico de página é mais adequado?
20
Planeamento de um sitio Web
Necessário definir os objectivos da página 
definição da estrutura, conteúdos e manutenção.
Cada página deve conter informações-base para ser
autónoma e consistente com as outras páginas.
– Quem é o autor, email de contacto
– Que assunto se trata
– Quando foi feita e/ou data da última actualização
Apresentação gráfica do sítio
–
–
–
–
Ícones claros e consistentes
Identificação esquemática dos menus
Botões de navegação
Titulos, subtitulos, cabeçalhos, rodapés e links bem vísiveis
21
Planeamento de um sitio Web
A informação deve estar disponível no mais curto
período de tempo percorrendo o menor número de
etapas.
– Informação hierarquizada
– Menus com poucos links
– Ecrã não sobrecarregado (texto/imagens)  abertura das
páginas
– Navegação do sítio
Padrão consistente em todas as páginas
22
Planeamento de um sitio Web
Estrutura do sitio
Hierarquizar a informação
– Divisão da informação a incluir em cada página
– Estabelecer a hierarquia entre as páginas
– Determinar as ligações entre as páginas
23
Planeamento de um sitio Web
Estrutura do sitio
Informação
– Na página principal, títulos e menus visíveis e acessíveis na
parte superior da página
– Evitar páginas extensas
– Dividir a informação por várias páginas
– Introduzir hiperligações
– Página especifica com links
24
Planeamento de um sitio Web
Consistência do sitio
É a identidade visual própria para manter em todas as
páginas  definição do aspecto visual da página
Aspectos a ter em conta:
–
–
–
–
–
Cabeçalhos e rodapés
Títulos e subtítulos
Legibilidade do texto
Cores (3 ou menos)
Objectos Multimédia
Imagens (GIF,JPG,PNG)
Sons (Wave, Mpeg, MIDI)
Vídeos (Mpeg, AVI, MOV)
25
Criação e Gestão do sitio Web
Gestão do sitio Web – pessoa única para gerir
– Deve:
Responder aos emails dos utilizadores
Assegurar o funcionamento de grupos de discussão (se existir)
Assegurar o funcionamento de chats (se existir)
Interagir com os utilizadores
– Email sempre visível no rodapé da página
– Actualizar frequentemente o sitio Web
26
Criação e Gestão do sitio Web
Criação, abertura e guarda de páginas
– Menu Ficheiro, opção Novo, no painel Página em Branco
– Na barra de ferramentas – Botão Nova Página
27
Criação e Gestão do sitio Web
Criação, abertura e guarda de páginas
– Na barra de ferramentas – seta do Botão Nova Página
28
Criação e Gestão do sitio Web
Criação, abertura e guarda de páginas
– Menu Ficheiro, opção Abrir, no painel Página em Branco
– Na barra de ferramentas – Botão Abrir
29
Criação e Gestão do sitio Web
Criação, abertura e guarda de páginas
– Menu Ficheiro, opção Guardar, no painel Página em Branco
– Na barra de ferramentas – Botão Guardar
30
Realizar Actividade 1
31