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

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

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

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. Macromedia Dreamweaver Microsoft FrontPage 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.

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.

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.

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.

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.

Criação de Páginas Web

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 bem-estar 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

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.

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.

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ídeo-clips, 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

Microsoft FrontPage: O ambiente de trabalho

PROGRAMA DE EDIÇÃO WEB: FRONTPAGE Janela da aplicação Barras de ferramentas e painel Barra de menus

Janela da Aplicação Barra de título Barra de ferramentas Padrão Barra de menus Barra de ferramentas Formatação Painel de tarefas Janela de edição de páginas Web Selectores do modo de visualização

BARRAS DE FERRAMENTAS E O PAINEL Barra de ferramentas Efeitos DHTML Barra de menus Barra de ferramentas Padrão Barra de ferramentas Formatação Barra de ferramentas Imagens Barra de ferramentas Desenho Barra de ferramentas WordArt Painel de tarefas Barra de estado

BARRA DE MENUS

Microsoft FrontPage: Planeamento e criação de um Web site

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?

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

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

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

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

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)

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

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

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

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

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

Realizar Actividade 1