Criação de páginas p Unidade 4 UNIDADE 4: Criação de Páginas P Conceitos básicosb Técnicas de implantação de páginas p Criação de páginas p Programa de edição : Frontpage Programa de animação gráfica : : Flash Programa de edição : Dreamweaver Publicação 1
UNIDADE 4: Criação de Páginas P A World Wide,, WWW ou simplesmente, consiste num sistema de hipertexto ou hipermédia à escala planetária. Hipertexto ou hipermédia quer dizer, neste contexto, documentos que contêm ligações de uns para os outros, incluindo não apenas texto, mas também m imagens, sons, vídeos, v etc. A informação apresentada neste sistema reside em documentos escritos em linguagem específica: HTML (Hypertext Markup Language) UNIDADE 4: Criação de Páginas P A transferência de informação dá-se d entre computadores que actuam como servidores (( servers) e outros que actuam como clientes. O protocolo que assegura esta transferência é o HTTP Hypertext Transfer Protocol. Para visualizar uma página p é necessário que o computador cliente tenha instalado um browser, como Firefox,, Internet Explorer, Ópera, etc. 2
Programação de páginas p O HTML é a linguagem mais utilizada para criar páginas p com hipertexto. Utilizando a linguagem HTML podemos criar páginas em que certos itens (palavras e/ou imagens) contêm uma ligação link a outra zona da mesma página p ou a outros documentos. Programação de páginas p DHTML (Dynamic( HTML) Linguagem que torna os elementos da uma página p (texto, imagens, etc.) mais dinâmicos. VRML (Virtual Reality Modelling Language) Linguagem que permite a criação de ambientes virtuais por onde se pode passear, visualizar objectos por ângulos diferentes e até interagir com eles. 3
Programação de páginas p Exercício cio Exemplificativo Na aplicação Bloco de Notas escreva o seguinte: Guarde o ficheiro com o nome P1.html Feche o Bloco de Notas e abra o ficheiro que acabou de criar Programação de páginas p Este será o resultado final 4
Programação de páginas p Cada página p é gerada por código c fonte em HTLM Programação de páginas p Estrutura básica b de um documento HTML 5
Editores de páginas p Editores mais utilizados na criação de páginas p : FrontPage e Dreamweaver. FrontPage Desenvolvido pela Microsoft, é considerado um dos melhores programas para a criação de sites. Dreamweaver Desenvolvido pela Macromedia, permite implementar rapidamente menus interactivos, criar elementos que respondem a acções diversas dos utilizadores, inserir animações, multimédia, ficheiros Flash, etc. Editores de imagem e efeitos especiais CorelDRAW e Photoshop são dois editores de imagem muito utilizados na criação de páginas p. CorelDRAW Programa gráfico, desenvolvido pela Corel,, que cria imagens recorrendo à utilização de objectos armazenados internamente como equações matemáticas ticas (vectores). Photoshop Software desenvolvido pela Adobe que permite manipular as imagens de diversas formas e reconhece várias extensões de ficheiros gráficos. 6
Editores e programas de animação gráfica Flash Software desenvolvido pela Macromedia que oferece recursos surpreendentes para criar sites apelativos, abrangentes e interactivos. ULEAD GIF Animator Programa de produção de imagens animadas (GIFs animados) desenvolvido pela ULEAD Systems. Ferramentas e utilitários FTP (File Transfer Protocol) Protocolo utilizado para transferir ficheiros entre dois computadores. O CuteFTP é um programa de transferência de ficheiros que permite retomar um download interrompido. O WS FTP é um programa simples que permite fazer a ligação a um servidor de páginas. 7
Ergonomia e amigabilidade de uma página Regras de adaptação do utilizador à página. Características desejáveis no interface entre o utilizador e a página. Ergonomia e amigabilidade de uma página p Aspectos a ter em atenção antes de iniciar o desenvolvimento de um site: Em cada página, p o número n de elementos a reter deve ser limitado. A informação deve estar organizada tendo em atenção a sua importância. Os termos nos menus são padronizados e devem ser respeitados. Os símbolos s utilizados, sempre que possível, devem expressar o seu significado. As cores a utilizar e os efeitos gráficos devem ser escolhidos com cuidado. As imagens a incluir em cada página, p bem como o seu formato, devem ser escolhidas cuidadosamente. 8
Ergonomia e amigabilidade de uma página p Aspectos a ter em atenção antes de iniciar o desenvolvimento de um site: Utilizar um vocabulário simples. Disponibilizar apenas a informação necessária, evitando redundâncias. Outros aspectos importantes: Diminuir, ao máximo, m o número n de escolhas em cada página. Utilizar títulos t tulos para que o utilizador saiba sempre onde está. Disponibilizar um mapa do site para o utilizador se situar. Planeamento de um site 9
UNIDADE 4: CRIAÇÃO DE PÁGINAS WEB PROGRAMA DE EDIÇÃO WEB: FRONTPAGE Janela da aplicação Barras de e painel menus Janela da aplicação Padrão título menus Formatação Painel de tarefas Janela de edição de páginas Selectores do modo de visualização 10
Ambiente de trabalho menus Barras de lista de pastas Zona de visualização das páginas Activar / Desactivar lista de pastas Activar / Desactivar Árvore de navegação Separador Estrutura Separador Dividir Separador Código Separador Pré-visualização e o painel Efeitos DHTML menus Padrão Imagens Formatação Desenho Painel de tarefas WordArt estado 11