1 / 65

7 - Criação de Páginas Web

7 - Criação de Páginas Web. A Internet. A Internet.

jeri
Download Presentation

7 - Criação de Páginas Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 7 - Criação de Páginas Web A Internet

  2. A Internet • Empresas, instituições e pessoas individuais estão cada vez mais interessadas não só em aceder ao imenso manancial de informação disponibilizado pela Internet mas também em oferecer a sua própria informação a muitas outras pessoas. Criar páginas Web torna-se, pois, uma inevitabilidade.

  3. A Internet • Criar uma página Web permite gerar um ambiente com muitas potencialidades, onde é possível: • mostrar um estilo estético próprio, personalizado e oportuno; • promover a pesquisa de informação; • promover produtos e serviços; • estimular com interfaces próprias a troca de textos, imagens, sons, etc.; • fornecer informação filtrada, seleccionada e comentada; • criar contextos propícios ao ensino à distância; • estimular compras, trocas e vendas; • criar «espaços virtuais» onde se pode conversar, ver e ouvir outras pessoas em tempo real; • consultar «grupos de estudo»; • criar ferramentas para trabalhar cooperativamente com outras pessoas; • etc.

  4. 7 - Criação de Páginas Web Técnicas de implantação

  5. Programação páginas Web • Para se criar uma página Web, terá de se usar uma das seguintes linguagens de programação:

  6. Editores de página Web • Há duas formas de criar documentos para a Web: • Inserir o conteúdo (textos, imagens, sons, etc.) e formatá-lo através dos códigos de formatação e marcação HTML. • Utilizar um editor WYSIWYG (What You See Is What You Get – o que se vê é o que obtém), o que permite inserir o conteúdo de forma gráfica, ficando a escrita dos códigos a cargo do editor.

  7. Editores de imagem e efeitos especiais • A Web baseia-se na combinação de textos, imagens e outros componentes de forma coerente, racional e estética. • Existem vários editores de imagens, como por exemplo, o Corel Draw, o JASC Paint Shop Pro e o Adobe Photoshop, que são programas que permitem manipular imagens ou fotografias, usando ferramentas poderosas.

  8. Editores de programas de animação gráfica • Para criar animações existem vários programas, como por exemplo: • O Macromedia Studio MX2004 with Flash Profissional é um programa de tratamento de animação vectorial. Permite criar animações interactivas para a Web; • O GIF Animator é um programa que visa a produção de imagens animadas. Permite manipular imagens com formato GIF; • O COOL 3D é um programa que gera animações a três dimensões (3D) como esferas, cubos, cones, etc.

  9. Ferramentas e utilitários • Depois de criarmos uma página Web no nosso computador, ela só se torna acessível ao Mundo se a colocarmos num computador servidor, ao qual corresponderá um determinado endereço, ou URL (Uniform Resource Locator).

  10. Ferramentas e utilitários • O Protocolo para Transferência de Ficheiros (FTP, File Transfer Protocol) é o protocolo que define a forma de enviar ficheiros pela Internet. Para publicar um site na Web existem diversas ferramentas, como por exemplo o WSFTP e o CuteFTP. Estes programas permitem «verter» informação de um computador para um servidor (computador que armazena um site e que o mantém disponível na Web). Para transferir um site para um servidor, é preciso a identificação de utilizador e palavra-passe. O explorador do Windows executa FTP directamente, sem necessidade de recorrer a outro software específico

  11. Criação de páginas Web • A seguir indicam-se os princípios gerais a ter em conta quando se cria uma página para a Web: • A página de entrada: é frequente ser de apresentação institucional. No topo poderá aparecer o logotipo, nome, endereço, números de telefone, etc.; no rodapé, a data da última actualização, o contacto do responsável pela página e o número de utilizadores que acederam à página. • Fontes: devem escolher-se fontes como o Arial e o Verdana para visualizações no ecrã e o Times New Roman para impressões. Relativamente ao tamanho, os mais adequados são: 2 (10 pontos) para texto, 3 (12 pontos) para subtítulos e 4 (14 pontos) para títulos. • Cores: deve existir contraste entre o fundo e o texto. Além disso, devem usar-se cores da paleta Web de 216 cores, de modo a garantir que a cor é sempre igual em qualquer computador e resolução. Não se deve usar um número excessivo de cores.

  12. Criação de páginas Web • Imagens: apresentá-las com o mínimo tamanho (em bytes) possível. Optimizar a imagem, de preferência, nos formatos JPG, GIF e PNG. Não se deve abusar de GIF animados. • Vídeo e áudio: deve incluir-se sempre o tamanho dos ficheiros e indicar o plug-in necessário para ver / ouvir / manipular o ficheiro. • Molduras: usar no caso de haver conteúdos fixos e de controlo de navegação. • Tabelas: no Word, a largura disponível para o texto é fixa e depende da largura da página. No FrontPage a largura depende da resolução do ecrã de quem visualiza a página, pelo que o texto ajustar-se-á até ocupar toda a largura, originando desformatações frequentes. As tabelas com bordo 0 (zero) são excelentes para fixar larguras e/ou comprimentos, pelo que devem ser usadas para misturar imagens e texto.

  13. Planeamento de umweb site • Antes de iniciar a criação de um site para a Web, é necessário planeá-lo. • Deve começar-se por determinar objectivos, respondendo à questão «O que pretende o site?». • É importante caracterizar quem visitará o site: «Que computadores utilizará?; Que velocidade de ligação à Internet terá?» As respostas a perguntas como estas condicionarão a complexidade da estrutura de navegação, a possibilidade de utilizar recursos como vídeo e/ou som, o tamanho das páginas, a necessidade de plug-ins e o grafismo utilizado.

  14. Planeamento de umweb site • Determinar e organizar o site por secções de visualização, colocando na mesma pasta as páginas relacionadas. Sempre que for adequado, utilizar subpastas. • Decidir previamente onde serão armazenados todos os itens, como imagens e ficheiros de som. É conveniente colocar todas as imagens de uma secção numa única pasta, para facilitar a localização. • Desenhar em papel, esquematicamente, a aparência e a organização das páginas, de modo a manter uma certa coerência no aspecto e na navegação. Uma abordagem mais avançada seria criar um desenho digital do site, utilizando aplicações como o Macromedia FreeHand, por exemplo. • Criar mecanismos e sinalética que indiquem em que parte do site o utilizador está (utilizar, por exemplo, índices e motores de busca internos). • Reunir antecipadamente todos os recursos (imagens, sons, etc.) que vão integrar as páginas antes de as começar a construir, evitando a interrupção constante do desenvolvimento do site.

  15. 7 - Criação de Páginas Web FrontPage Apresentação

  16. Apresentação • A partir do menu INICIAR, procurar a opção correspondente ao programa • de edição de páginas FrontPage. • Em alternativa, seleccionar o comando INICIAR – Executar, digitar «frontpg» e pressionar a tecla Enter.

  17. Apresentação • O FrontPage é um editor de páginas Web que permite construir as páginas no modo WYSIWYG («o que se vê é o que se obtêm»), ou seja, funciona como um tradutor entre a formatação/funcionalidades dos documentos Web e o código HTML necessário para o conseguir.

  18. Apresentação • O ambiente de trabalho do FrontPage, divide-se em quatro áreas: • Menus e barras de ferramentas e de formatação • Barra de vistas • Painel de tarefas • Lista de pastas/Painel de navegação 1 3 4 2

  19. 7 - Criação de Páginas Web FrontPage Criação de um Web Site

  20. Criação de um Web Site • Para criar um novo Web site, há dois caminhos possíveis: • Clicar no botão Novo, na barra de ferramentas padrão, e escolher Web site… De seguida, escolher um modelo, atribuir-lhe um nome e guardá-lo numa unidade.

  21. Criação de um Web Site • Seleccionar FICHEIRO – Novo. Escolher Web site de uma página, site da equipaSharePoint, soluções de pacote web ou Mais modelos de Web site, do painel de tarefas e, por fim, seleccionar um dos modelos de Web site

  22. 7 - Criação de Páginas Web FrontPage Gestão de um Web Site

  23. Gestão de um Web Site • O FrontPage possui ferramentas de gestão que o tornam um verdadeiro assistente de produção. Estas ferramentas incluem: • gestão de tarefas e ficheiros; • relatórios; • gestão de hiperligações; • segurança e controlo de origem. • A gestão de tarefas e ficheiros permite atribuir ficheiros e tarefas a desenvolver por uma pessoa ou por um grupo de trabalho.

  24. Gestão de um Web Site • Os relatórios permitem supervisionar o desenvolvimento de tarefas e fazer resumos do site, detectar problemas com páginas lentas ou ligações quebradas, gerar estatísticas de visitas ao site, etc.

  25. Gestão de um Web Site • Sempre que se move ou elimina um ficheiro, o FrontPage actualiza automaticamente todas as hiperligações relativas a esse ficheiro (gestão de hiperligações).

  26. Gestão de um Web Site • O FrontPage permite que o administrador do site defina contas de utilizadores e respectivas funções e garante que cada ficheiro só pode ser editado por um utilizador de cada vez (segurança e controlo de origem).

  27. 7 - Criação de Páginas Web FrontPage Gestão de páginas

  28. Criação • Para criar uma nova página de um site, escolher uma das seguintes opções: • Clicar no botão Novo na barra de ferramentas padrão e premir Página. • FICHEIRO – Novo – Página ou Web e escolher, do Painel de tarefas, Novo – Páginaem branco ou Novo a partir de um modelo de página.

  29. Abertura • Para abrir uma página existente, clicar no botão Abrir na barra de ferramentas padrão ou seleccionar FICHEIRO – Abrir.

  30. Guardar • Para guardar uma página, premir o botão Guardar ou seleccionar FICHEIRO – Guardar. • Para imprimir uma página, ver a página em modo Normal ou HTML e seleccionar FICHEIRO – Imprimir. Depois, escolher as opções de impressão.

  31. Pré-visualização • Há duas formas de pré-visualizar um Web site: • Usar o browser interno, a partir do separador de modos.

  32. Pré-visualização • Usar um browser externo, como o Internet Explorer ou oNetscape, a partir de FICHEIRO – Pré-visualizar no browser. Este comando permite adicionar novos browsers, definir o tamanho da janela e activar, ou não, a guarda automática de páginas antes da pré-visualização.

  33. 7 - Criação de Páginas Web FrontPage Formatação e melhoramento da apresentação das páginas Web

  34. Adição de estilos de formatação • Tal como o Word, o FrontPage permite personalizar estilos de texto, bem como usar os que já vêm definidos no programa. O estilo pode ser escolhido a partir da caixa de estilos da barra de formatação. Para ver, modificar ou adicionar estilos, escolher FORMATAR – Estilos. O FrontPage permite optar entre Códigos HTML e Estilos do utilizador.

  35. Tipo de letra • A formatação do texto pode ser feita usando as opções da barra de formatação, nomeadamente o estilo, o tipo de letra, o tamanho, o Negrito, Itálico e Sublinhado, o aumentar ou diminuir o tamanho de letra, etc. • Se se pretender optar por outras cores ou por uma cor visível no ecrã, clicar em Mais cores…, premir o comando Seleccionar e pressionar a área que possui a cor pretendida. Por fim, premir OK. Para seleccionar mais opções de formatação, escolher FORMATAR – Tipo de letra.

  36. Parágrafos • O FrontPage, tal como o Word, permite inserir: • quebra de linha (premir Shift + Enter), que provoca uma mudança de linha mas onde não há mudança de parágrafo; • mudança de parágrafo (Enter). • As diferenças são visíveis, por exemplo, na altura entre linhas e na aplicação de alinhamentos de parágrafos. No primeiro caso, como há um só parágrafo, só se pode ter um alinhamento. No segundo, podem aplicar-se diferentes alinhamentos (à esquerda, à direita, centrado ou justificado).

  37. Marcas e numeração • Para formatar listas, seleccionar FORMATAR – Marcas e numeração – Propriedades da lista. • Este comando permite escolher marcas de imagens e números. Além disso, permite fechar os itens dentro da lista, através da opção «Permitir fechar destaques».

  38. Limites e sombreado • Este comando permite escolher uma imagem de padrão de fundo, definir limites, cor, largura, área, cor de fundo e de primeiro plano.

  39. Posição • Este comando só se encontra activo quando se selecciona uma imagem. Permite escolher um estilo de moldagem para combinar imagem e texto.

  40. Temas • A partir de FORMATAR – Temas é possível escolher um tema a aplicar a todas as páginas ou apenas a páginas seleccionadas (para seleccionar várias páginas abrir a lista de pastas e, enquanto se pressiona a tecla Ctrl, clicar com o rato no nome da página).

  41. Limites partilhados • Este comando permite definir barras de hiperligações a aplicar a todas as páginas ou apenas à página actual.

  42. Preenchimento de fundo • Esta opção só se encontra disponível para páginas que não tenham tema. A partir de FORMATAR – Preenchimento de fundo, é possível escolher: • uma imagem de fundo e aplicar-lhe marca de água; • efeitos rollover em hiperligações, isto é, quando o cursor do rato passar sobre a hiperligação, esta muda de cor e apresenta uma ligeira animação; • alterar as cores do fundo, do texto e das hiperligações; • obter informações do fundo a partir de outra página.

  43. Inserção de imagens • O FrontPage permite inserir imagens de diferentes fontes: do ClipArt, a partir de um ficheiro, do scanner, de desenhos e formas automáticas, do WordArt, a partir de vídeo, etc. • A barra de ferramentas Imagens permite efectuar vários tipos de operações sobre imagens.

  44. Adição de som de fundo • Para se adicionar um som que se ouvirá quando se abrir a página, activar o menu de atalho da página e seleccionar Propriedades da página. É então possível escolher: • a localização do ficheiro; • o número de vezes que se repete o som; • repetir sempre o som ou não. • Por fim, premir OK.

  45. Criação de formulários • Dois dos modelos de página disponíveis em FICHEIRO – Novo são relativos a formulários: • Formulário de confirmação – permite confirmar a recepção de entradas por parte do utilizador nas páginas de debate, de registo ou de resultado do formulário. • Formulário de resposta – permite ao utilizador comentar o site, a sua organização ou os seus conteúdos.

  46. Criação de formulários • Para criar um formulário a partir de uma folha em branco, escolher os seus componentes a partir de INSERIR – Formulário.

  47. Utilização Tabelas • Como vimos anteriormente, o uso de tabelas no FrontPage permite combinar texto e imagens, evitando posteriores desformatações. • Normalmente, faz-se «desaparecer» a tabela definindo o tamanho do limite com o valor zero (0). • As operações com tabelas no FrontPage são semelhantes às efectuadas no Word.

  48. Utilização de molduras (frames) • As frames são úteis para criar ferramentas de navegação, como por exemplo listas de hiperligações. Normalmente a área fixa mantém-se sempre visível, enquanto a área central é variável. • Em Mais modelos de páginas, no separador «Páginas com frames», é possível abrir uma nova página com frames.

  49. Utilização de molduras (frames) • O FrontPage abre uma página separada por áreas, às quais se atribui um ficheiro existente ou um ficheiro em branco. • A partir do menu de atalho da página podem editar-se as propriedades da frame (página inicial, tamanho, margens, definir se a frame será redimensionável ou não no browser, etc.) e escolher opções para mostrar barras de deslocamento. Ao premir o botão Página das frames… pode inserir-se o espaçamento da frame e activar, ou não, a opção de mostrar os seus limites.

  50. 7 - Criação de Páginas Web FrontPage Hiperligações

More Related