TIC Módulo 2: Criação de Páginas Web Curso Profissional de Técnico de: - Auxiliar de Saúde - Secretariado - Eletrónica e Automação Docente: Ana Batista.

Apresentação em tema: "TIC Módulo 2: Criação de Páginas Web Curso Profissional de Técnico de: - Auxiliar de Saúde - Secretariado - Eletrónica e Automação Docente: Ana Batista."— Transcrição da apresentação:

1 TIC Módulo 2: Criação de Páginas Web Curso Profissional de Técnico de: - Auxiliar de Saúde - Secretariado - Eletrónica e Automação Docente: Ana Batista

2 Conceito de Web site Um website (também chamado sítio Internet por abuso de linguagem) é um conjunto de ficheiros HTML, vinculados por relações hipertextuais, armazenados num servidor web, ou seja um computador permanentemente ligado à Internet, alojando as páginas web.

3 A criação de um site justifica-se por várias razões : A necessidade de visibilidade: um site, se for alvo de uma boa campanha de promoção, pode ser um meio para uma marca ou uma organização aumentarem a sua visibilidade; A melhoria da notoriedade: graças a um site institucional ou um mini site web relativo aos acontecimentos, uma marca pode desenvolver a sua popularidade junto do público; O recolhimento de dados: a Internet representa para as empresas uma formidável oportunidade de recolher dados sobre os seus clientes ou de atrair novos clientes;

4 A venda em linha: receosos no início da Internet, os cibernautas rapidamente compreenderam o interesse da Internet para a compra de certos produtos de consumo. Um site pode representar, para certas empresas, uma oportunidade em termos de comercialização; Implementação de um apoio aos utilizadores: cada vez mais empresas utilizam a Internet como suporte privilegiado para o serviço pré ou pós- venda. Com efeito, com um site, é possível pôr à disposição dos cibernautas um máximo de informações comerciais ou técnicas, a baixo custo.

5 Distinguem-se habitualmente várias categorias de sites, de acordo com o objetivo dos mesmos: Os sites exposição têm por objetivo promover a imagem de marca da empresa, apresentando. por exemplo, os seus produtos ou os seus serviços; Os sites catálogo são sites destinados a apresentar a oferta da empresa; Os sites de informação são sites que fornecem uma informação específica a um tipo de utilizador da internet;

6 Os sites comerciais são sites que vendem diretamente produtos ao utilizador da internet e permitem eventualmente pagar em linha; Os sites institucionais são sites que apresentam a organização e os seus valores. Este tipo de site descreve geralmente a atividade da organização, e dá informações necessárias aos clientes ou aos beneficiários; Os sites pessoais (ou páginas pessoais) são sites realizados por particulares a título de lazer, geralmente por paixão por um assunto ou uma disciplina;

7 Os sites comunitários são sites que reúnem cibernautas ao redor de um interesse comum. Os sites intranet são sites acessíveis a partir do interior de uma empresa ou de uma direção, tendo por objectivo a disponibilização e partilha de informações profissionais.

8 O que é o webmastering ? Chama-se webmaster (em português webmestre) à pessoa responsável por um síte, ou seja, geralmente a pessoa que concebe um site e o atualiza. A vida de um site possui duas facetas principais, e cada uma pode dividir-se em fases específicas: A criação, correspondendo à concretização de uma ideia num site em linha, remetido e visitado; A exploração, correspondendo à gestão diária do site, a sua evolução e a sua atualização.

9

10 A criação de um site é um projeto global que compreende um grande número de fases: Concepção, que corresponde à formalização da ideia; Realização, que corresponde ao desenvolvimento do site; Alojamento, que é a colocação em linha do site, de maneira permanente.

11 A exploração do site engloba, nomeadamente, as atividades seguintes: Acompanhamento, das tecnologias, do posicionamento do site e do dos concorrentes; Promoção e referenciações, permitindo aumentar a sua audiência; Manutenção e atualização, representando a animação diária do site e a manutenção do seu bom funcionamento.

12 A criação de site é por conseguinte uma atividade multidisciplinar que recorre a um grande número de competências. De acordo com a organização, a função de webmaster poderá passar por encarregado de todas as atividades, da concepção à referenciação. O termo webmastering designa o conjunto das tarefas necessárias para a exploração de um site web.

13 13 Técnicas de implantação de páginas na Web Linguagens de Programação ▫ O HTML é a linguagem mais utilizada para criar páginas Web com hipertexto. ▫ Utilizando a linguagem HTML podemos criar páginas em que certos itens (palavras e/ou imagens) contêm uma ligação – link ou hiperligação – a outra zona da mesma página ou a outros documentos. ▫ DHTML (Dynamic HTML) – Linguagem que torna os elementos da uma página (texto, imagens, etc.) mais dinâmicos.

14 14 Técnicas de implantação de páginas na Web Linguagens de Programação ▫ Java e Java Script ▫ Visual Basic Script ▫ JSP – Java Server Pages ▫ ASP – Active Server Pages ▫ PHP – Personal Home Page ▫ Este tipo de linguagens estão interligadas com o HTML e permitem incluir efeitos dinâmicos e interactivos (por exemplo, interacção com bases de dados).

15 15 Técnicas de implantação de páginas na Web Criação de uma página através do Bloco de Notas, utilizando código HTML: A minha primeira página TIC – Módulo 3 – Criação de páginas Web Esta é a minha primeira página Web!

16 16 Técnicas de implantação de páginas na Web Editores de páginas Web ▫ Editores mais utilizados na criação de páginas Web: SharePoint e Dreamweaver ▫ Os editores de criação e gestão de páginas permitem inserir e formatar o conteúdo de forma gráfica.

17 17 Técnicas de implantação de páginas na Web Editores de Imagens e efeitos especiais O Corel Draw é um programa que permite manipular imagens vectoriais. O Paint Shop Pro é um programa que permite fazer tratamento de imagem.

18 18 Técnicas de implantação de páginas na Web Editores e programas de animação gráfica

19 19 Técnicas de implantação de páginas na Web Ferramentas e utilitários ▫ FTP (File Transfer Protocol) – Protocolo utilizado para transferir ficheiros entre dois computadores. ▫ Programas que implementam este protocolo:  Cute FTP  WS FTP

20 20 Ergonomia e amigabilidade de uma página Web: Aspectos a ter em atenção antes de iniciar o desenvolvimento de um Web site: ▫ Conteúdo ▫ Factores de design  Navegação  Layout ▫ Apoio técnico e processo de actualização

21 21 Conteúdo das páginas: ▫ Resumir os conteúdos ao fundamental. ▫ A informação deve estar organizada tendo em atenção a sua importância. ▫ Textos com uma linguagem simples e com parágrafos curtos (5 a 8 linhas).

22 22 Conteúdo das páginas: ▫ A origem do conteúdo deve ser conhecida. ▫ Disponibilizar apenas a informação necessária, evitando redundâncias. ▫ A página principal do Web site será a mais visitada. Por isso nela deve tentar resumir o que o visitante vai encontrar no Web site.

23 23 Design - Navegação: ▫ A estrutura do site deve manter-se simples e de fácil navegação. ▫ Disponibilizar um mapa do Web site para o utilizador se situar. ▫ Disponibilizar uma secção de “Ajuda” com a descrição dos passos a efectuar para visualizar a página correctamente.

24 24 Design - Navegação: ▫ O Web site deve conter um campo para pesquisa. ▫ Disponibilizar uma secção de “Contactos”. ▫ Possibilitar em qualquer altura o acesso à página inicial. ▫ Definir menus de acordo com os conteúdos principais e secundários de forma a facilitar o acesso à informação.

25 25 Design - Layout: ▫ As cores a utilizar e os efeitos gráficos devem ser escolhidos com cuidado. ▫ As imagens a incluir em cada página, bem como o seu formato, devem ser escolhidas cuidadosamente. ▫ Utilizar títulos para que o utilizador saiba sempre onde está.

26 26 Design - Layout: ▫ Layout elaborado de forma clara e compreensiva. ▫ A apresentação da informação deve ser atractiva. ▫ As imagens, som ou vídeo devem estar de acordo com a informação veiculada.

27 27 Apoio técnico e processo de actualização ▫ O Web site deve incluir informação acerca da última actualização. ▫ O conteúdo deve ser actualizado regularmente. ▫ Não deve haver problemas de funcionamento técnico.

28 28 Página principal: ▫ Topo: poderá aparecer o logótipo, nome, endereço, número de telefone, etc. ▫ Rodapé: data da última actualização, contacto do responsável pela página. Fontes: ▫ Devem escolher-se fontes como Arial e Verdana para visualizações, e Times New Roman para impressões.

29 29 Tamanho da letra: ▫ Texto: 2 (10 pontos); ▫ Subtítulos: 3 (12 pontos); ▫ Títulos: 4 (14 pontos). Cores: ▫ Deve existir contraste entre o fundo e o texto. ▫ Não se deve usar um número excessivo de cores.

30 30 Imagens: ▫ Apresentar as imagens com o mínimo tamanho possível – resolução de 72 dpi. ▫ Optimizar a imagem de preferência, nos formatos JPG, GIF ou PNG. ▫ Não se deve abusar de GIF animados. JPG ou PNGGIF animado

31 31 Vídeo e áudio: ▫ Deve incluir-se o tamanho dos ficheiros e indicar o plug-in necessário para ver/ouvir/manipular o ficheiro e o endereço da página onde se pode obter esse plug-in. ▫ Formatos de ficheiros que devem ser utilizados:  Vídeo - MPEG, AVI ou MOV  Som - WAVE, MPEG ou MIDI

32 32 Molduras: ▫ Utilizar no caso de haver conteúdos fixos. Tabelas: ▫ São excelentes para misturar imagens e texto.

33 33 Planeamento de um Web site Conjunto de questões que se devem colocar aquando da criação de um Web site: ▫ Para quê? ▫ Para quem? ▫ O quê? ▫ Como?

34 34 Planeamento de um Web site Fase 1: Definir os objectivos do Web site Fase 2: Caracterizar o público-alvo Fase 3: Identificar os conteúdos a publicar Fase 4: Identificar os recursos a utilizar Fase 5: Estruturação geral do Web site Fase 6: Construir o Web site Fase 7: Publicar o Web site Fase 8: Gerir o Web site

35 35 Planeamento de um Web site Fase 1: Definir os objectivos do Web site: ▫ Para quê? ▫ Qual o propósito ou finalidade do Web site? ▫ Trata-se de identificar os objectivos do Web site. Fase 2: Caracterizar o público-alvo: ▫ Para quem? ▫ Trata-se de identificar quais a pessoas que vão visitar o Web site, bem como os recursos que utilizam (computador, velocidade ligação à Internet, etc).

36 36 Planeamento de um Web site Fase 3: Identificar os conteúdos a publicar: ▫ O quê? ▫ Que conteúdos é que pretendo incluir ou publicar no Web site? Fase 4: Identificar os recursos a utilizar: ▫ Como? ▫ Quais os recursos necessários para a construção do Web site (software de criação de páginas, software de tratamento de imagens, etc).

37 37 Planeamento de um Web site Fase 5: Estruturação geral do Web site: ▫ Elaborar um esboço ou esquema das páginas que vão integrar o Web site, definir o conteúdo de cada página, definir as ligações entre as páginas, etc. Fase 6: Construir o Web site: ▫ Criar as páginas do Web site, de acordo com o que foi estipulado nos pontos anteriores. ▫ Reunir e dar forma aos diversos conteúdos que se pretende incluir no site, utilizando as ferramentas mais adequadas para conseguir uma boa apresentação.

38 38 Planeamento de um Web site Fase 7: Publicar o Web site: ▫ Transferir as páginas que constituem o Web site para um servidor na Web. Fase 8: Gerir o Web site: ▫ Actualização do Web site:  Actualizar conteúdos e hiperligações;  Efectuar alterações que se revelem necessárias.

39 39 Planeamento de um Web site Estrutura do Web site Objetivo principal: estruturar a informação e facilitar o acesso rápido à informação, permitindo uma navegação fácil e rápida: ▫ Divisão da informação em unidades a incluir em cada página; ▫ Estabelecimento de uma hierarquia entre esses blocos de informação; ▫ Determinação das ligações entre esses blocos de informação.

40 40 Planeamento de um Web site Estrutura do Web site Tipos de Estruturas: ▫ Linear ▫ Hierárquica ▫ Radial ▫ Web

41 41 Planeamento de um Web site Estrutura do Web site Estrutura Linear ▫ As páginas vão surgindo sequencialmente ao longo do Web site. ▫ O utilizador limita-se a avançar para a página seguinte ou a recuar para a anterior. ▫ Navegação muito simples em que o utilizador não se perde.

42 42 Planeamento de um Web site Estrutura do Web site Estrutura Radial ▫ De uma página central podemos aceder a todas as outras páginas e retroceder.

43 43 Planeamento de um Web site Estrutura do Web site Estrutura Hierárquica ▫ Existe uma página de entrada ou principal (homepage) que contem ligações (links) para outras páginas. ▫ Por sua vez, estas páginas podem conter sub-tópicos que dão acesso a outras páginas hierarquicamente mais baixas. ▫ Não devem existir mais de quatro níveis hierárquicos. ▫ Deve existir sempre a possibilidade de o utilizador saltar para a homepage.

44 44 Planeamento de um Web site Estrutura do Web site (1) HOME (2) Empresa (3) Instalações (4) Serviços (5) Produtos (8) A/C (9) Áudio (10) Tunning (11) Alarmes (12) GPL (6) Stand (13) Novos (14) Usados (7) Contactos Exemplo da estrutura do Web site:

45 45 Planeamento de um Web site Estrutura do Web site Estrutura Web ▫ Nesta estrutura predomina uma aparente anarquia na navegação. ▫ Qualquer página pode estar ligada a outra, bem como a Web sites com estruturas diferentes. ▫ Encontramos este tipo de estrutura em Web sites com a consequente dificuldade na navegação.

46 46 Planeamento de um Web site Estrutura do Web site Listagem de Web sites mal estruturados ▫ http://www.ikissyou.org/ http://www.ikissyou.org/

47 47 Planeamento de um Web site Consistência do Web site É a identidade visual própria que se deve manter ao longo de todas as páginas para que o leitor encontre informação que deseja utilizando sempre os mesmos procedimentos.

48 48 Planeamento de um Web site Consistência do Web site Esta identidade visual é conseguida através de vários processos, nomeadamente: ▫ Utilização de molduras (frames) e tabelas que dividem a página em áreas para colocação de informação específica. ▫ Localização de títulos em locais estratégicos. ▫ Disposição e organização dos menus, dos cabeçalhos e rodapés.

49 49 Planeamento de um Web site Consistência do Web site Esta identidade visual é conseguida através de vários processos, nomeadamente: ▫ Ligações e barras de ferramentas sempre nos mesmos locais. ▫ Código de cores idêntico em todas as páginas. ▫ Formatação semelhante de caracteres. ▫ Modelos idênticos de botões.

50 50 Planeamento de um Web site Consistência do Web site Definição do planeamento do layout Título da página Barra de menus Área de inserção de texto Rodapé para inserção de links ou outras informações Cor do fundo Separador Caixa para imagens, índices ou menus

51 51 Planeamento de um Web site Consistência do Web site Aspetos relevantes a ter em conta são, ainda: ▫ Os cabeçalhos e rodapés, locais onde a informação se repete ao longo das páginas do Web site; ▫ Os títulos e subtítulos devem identificar claramente o conteúdo das páginas; ▫ A legibilidade do texto, isto é, a formatação dos caracteres e dos parágrafos; ▫ As cores a utilizar devem privilegiar o que é mais relevante e importante na página. ▫ Os objectos multimédia (imagens, gráficos, animações, sons, vídeos) são objectos muito utilizados para tornar as páginas e Web sites mais atraentes e com melhor aspecto gráfico.

52 Sites que permitem a criação de Web sites de forma gratuita Pt.wix.com

53 Sites que permitem a criação de Web sites de forma gratuita http://www.webnode.pt/

54 Sites que permitem a criação de Web sites de forma gratuita http://www.123paginaweb.pt/

55 Sites que permitem a criação de Web sites de forma gratuita http://criecom.ucoz.com.br/

56 E mais...

57