7 - Criação de Páginas Web

Apresentação em tema: "7 - Criação de Páginas Web"— Transcrição da apresentação:

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: Linguagem Características HTML HyperText Markup Language: linguagem de marcação com hipertexto (documento com palavras ou imagens que permitem «saltar» para outras páginas com o clique do rato), usada para criar documentos para a Web. DHTML Dynamic HTML: linguagem de HTML dinâmico, que inclui recursos interactivos para criar páginas Web. Utilizam-se cada vez mais scripts de linguagens de programação. O JavaScript é um bom exemplo. VRML Virtual Reality Modeling Language: linguagem para modelação de realidade virtual, que permite, através de elementos geométricos, apresentar ambientes tridimensionais ou virtuais. Para ver páginas em VRML é necessário um plug-in (aplicação simples a instalar no computador «cliente» para manipular informação em determinado formato). XML EXtensible Markup Language: linguagem de marcação de dados que prevê um formato para descrever dados estruturados e facilita declarações mais precisas do conteúdo e resultados mais significativos de busca através de múltiplas plataformas. Enquanto o HTML permite descrever a aparência dos dados, o XML permite definir o significado dos dados.

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 um web 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 um web 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 equipa SharePoint, 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ágina em 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

51 Hiperligações Para visualizar as hiperligações de uma página, seleccioná-la da lista de páginas e abrir a vista de Hiperligações.

52 Criar hiperligações Para criar uma hiperligação interna é necessário criar marcadores no documento e, de seguida, inserir hiperligações para esses marcadores. Para criar marcadores: clicar no ponto onde se pretende inserir o marcador; escolher INSERIR – Marcador; atribuir um nome ao marcador.

53 Inserir hiperligações
Para inserir uma hiperligação, colocar o cursor do rato no ponto de inserção [na(s) palavra(s) ou figura seleccionada(s)] e escolher INSERIR – Hiperligação (Ctrl + K) ou premir o botão Inserir hiperligação. Criar hiperligações para Acção seguinte Ficheiro ou página Web Escolher a pasta, a página, o ficheiro ou o endereço Web. Colocar neste documento Seleccionar o marcador. Um novo documento Digitar o nome do documento e escolher se se pretende editar o ficheiro mais tarde ou logo após a inserção da hiperligação. Endereços de correio electrónico Digitar o endereço electrónico e o assunto ou escolher um endereço de correio electrónico utilizado recentemente.

54 Barras de hiperligações
Podem criar-se barras de hiperligações personalizadas com ligações Anterior e Seguinte e baseadas na estrutura de navegação.

55 Barras de hiperligações
A barra de hiperligações apresenta a ordem pela qual as páginas aparecem na vista de Navegação. Ao abrir as propriedades da barra de hiperligações, no menu de atalho, podem ser escolhidas várias opções.

56 7 - Criação de Páginas Web
FrontPage Animação

57 Inserção de componentes Web
A partir de INSERIR – Componentes Web podem escolher-se os efeitos dinâmicos para botões de apontar, painéis rolantes e gestor de faixas. Algumas destas animações (e também o som) só ficam disponíveis para utilizadores do browser Internet Explorer

58 Botão interactivo Na caixa «Propriedades do botão sensível ao rato» é possível: inserir um texto no botão em diferentes tipos de letra; criar hiperligações; definir as cores do botão e do fundo; seleccionar o efeito e a sua cor; redimensionar o botão; personalizar o botão com sons e imagens.

59 Painel Rolante Um painel permite mostrar texto a deslocar-se, na horizontal, no ecrã. Em «Propriedades do painel rolante» é possível digitar o texto, indicara sua direcção, velocidade e comportamento, o tamanho, as repetições e a cor do fundo.

60 Transição de página Este comando, que se pode encontrar no menu FORMATAR – Transições de página, permite escolher efeitos de transição para os seguintes eventos: «Ao entrar na página», «Ao sair da página», «Ao entrar no site» e «Ao sair do site». Para retirar estas transições, escolher a opção «Sem efeitos» em «Efeito de transição».

61 7 - Criação de Páginas Web
FrontPage Publicação

62 Publicação das páginas num servidor Web
Para publicar um site, é necessário encontrar uma empresa fornecedora de acesso à Internet (ISP) que guarde e disponibilize o site. Para que fiquem operacionais algumas funcionalidades, como os formulários, este fornecedor deverá possuir as extensões do FrontPage activas. Para publicar páginas de um Web site, escolher FICHEIRO – Publicar destino. De seguida, inserir o destino de publicação, que pode ser um servidor de HTTP ou de FTP, escolher as páginas a publicar e premir Publicar.

63 Publicação das páginas num servidor Web
Por fim, clicar em Publicar Web site

64 Gestão e actualização do conteúdo de um site
Antes e depois de publicar o site é boa prática rever todos os relatórios para detectar problemas a resolver. Se se pretender verificar as hiperligações do site, escolher as opções de verificação. Ao premir o botão Iniciar, o FrontPage abre um relatório onde se podem detectar todos os problemas com hiperligações.

65 Gestão e actualização do conteúdo de um site
Sempre que se efectuarem alterações a algumas das páginas do site, deve proceder-se novamente à sua publicação. Para actualizar as definições do Web site, usar FERRAMENTAS – Definições do site.