Web. Técnico de Organização de Eventos Módulo III Criação de Páginas Web. Técnico de Organização de Eventos

(1)

Módulo III – Criação de Páginas Web E-m @i l: ri card o64 49 @gm ai l.c om

Tecnologias de Informação e Comunicação

1

Módulo III – Criação de Páginas Web

E-m @i l: ri card o64 49 @gm ai l.c om

Introdução ao módulo III. Importância das

Páginas Web. Conceitos básicos. Bases de

funcionamento de um sistema WWW. Técnicas

de implantação e regras básicas de criação de

Páginas Web. Critérios e avaliação de Páginas

Web. Realização e correcção de uma ficha de

trabalho.

Sumário

2

Técnico de Organização de Eventos Módulo III – Criação de Páginas Web

Objectivos Gerais do Módulo

Conhecer técnicas de implantação das Páginas Web

Conhecer linguagens utilizadas na criação de Páginas Web

Conhecer editores de Páginas Web, editores de imagens, efeitos especiais, programas de animação gráfica

Conhecer conceitos gerais associados às páginas Web

Distinguir os conceitos de ergonomia e amigabilidade de uma Página Web

Distinguir os conceitos de HTML e hipertexto

Avaliar uma Página Web

Adquirir e Instalar o software de instalação

3

Indicar as principais características e potencialidades do programa

Descrever o ambiente de trabalho

Conhecer as opções da barra de menus

Identificar e utilizar as diversas barras de ferramentas

Conhecer os princípios de planeamento e planear Páginas Web

Reconhecer a importância do planeamento na construção de Páginas Web

4

Criar uma página Web

Formatar a apresentação das páginas

Utilizar estilos

Manipular texto, imagens, sons e vídeos, formulários, tabelas, frames

Conhecer e utilizar hiperligações

Conhecer e aplicar os efeitos de animação existentes

Publicar uma Página Web

Efectuar a gestão e actualização de uma página Web 5

E-m @i l: ri card o64 49 @gm ai l.c om Critérios de Avaliação 6 Domínio

Cognitivo _InstrumentalOperatório e Sócio – Afectivo

 Testes de Avaliação  Participação

 Fichas de Trabalho Realizadas  Pontualidade  Assiduidade  Autonomia  Comunicação  Responsabilidade  Iniciativa  Criatividade

(2)

09 de Junho

de 2011

Projecto

Final

Momentos de Avaliação

7

Início

•12/Maio/2011

Término

• 21/Julho/2011

Duração do

Módulo

8

E-m @i l: ri card o64 49 @gm ai l.c om Objectivos da Aula

Conhecer a importância das páginas Web

Conhecer os conceitos básicos

Conhecer o conceito Páginas Web

Conhecer o conceito Hipertexto

Conhecer e compreender as bases do funcionamento do sistema www

9

Objectivos da Aula – cont.

Conhecer e identificar técnicas de implantação de Páginas Web

Conhecer as várias linguagens utilizadas na criação de Páginas Web

Conhecer editores de imagens e efeitos especiais

Conhecer formas de criação de documentos para a Web

Conhecer editores de animação gráfica

Conhecer ferramentas e utilitários para publicar Páginas na Web

Conhecer editores de páginas Web

10

Objectivos da Aula – cont.

Conhecer as regras básicas de criação de Páginas

Web

Avaliar Páginas Web

Conhecer os critérios de avaliação de Páginas Web

Avaliar Páginas Web

11

Introdução à criação de páginas web

 No quotidiano todas as empresas, instituições e pessoas individuais estão cada vez mais dependentes da maior via de comunicação que é a Internet. Interessando-se assim não só em aceder à informação disponibilizado 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)

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. produtos e serviços;

Fornecer informação filtrada, seleccionada e comentada;

13

Criar uma página Web permite:

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;

Entre outros.

14

E-m @i l: ri card o64 49 @gm ai l.c om 15

E-m @i l: ri card o64 49 @gm ai l.c om Páginas Web

Localização na Internet que contém uma ou mais páginas HTML

relacionadas entre si.

16

E-m @i l: ri card o64 49 @gm ai l.c om Hipertexto

Ligações para outras secções dentro de um mesmo documento, para outros documentos ou mesmo para outras Páginas Web. Estes

links ou ligações apresentam-se de forma destacada no corpo do texto principal.

Exemplos:



Google

17

Bases do funcionamento do sistema www

(4)

19

20

21

22

E-m @i l: ri card o64 49 @gm ai l.c om Paradigma Cliente/Servidor 23

E-m @i l: ri card o64 49 @gm ai l.c om Paradigma Cliente/Servidor 24

(5)

Técnicas de Implantação de Páginas Web

• Linguagens de Programação

• Editor WYSIWYG

• Página Web estática

• Página Web dinâmica

• URL

• FTP

25

E-m @i l: ri card o64 49 @gm ai l.c om 26

Técnicas de implantação de páginas Web

Linguagem de Programação

Linguagem utilizada para expressar instruções para o computador.

Conjunto de regras sintácticas e semânticas usadas para definir a acção do computador.

Constitui o código fonte de um software (Programa).

Exemplo:

HTML, DHTML, VRML Java, PHP, entre outras.

27

E-m @i l: ri card o64 49 @gm ai l.c om HTML

HiperTextMarkupLanguage é a linguagem de construção de Páginas Web. Os documentos HTML são normalmente interpretados por navegadores. É um código baseado em marcas ou etiquetas (tags) que indica como deve ser a estrutura e formatação de cada página.

28

E-m @i l: ri card o64 49 @gm ai l.c om HTML - Características

Usa forma livre de escrita

Não necessita de conhecimento de lógica

Fácil de aprender e usar

29

E-m @i l: ri card o64 49 @gm ai l.c om DHTML

Dynamic HiperText Markup Language – é uma evolução da

linguagem HTML padrão, que inclui linguagem de scripting. Permite incluir recursos interactivos na elaboração de páginas Web.

Exemplos:

Javascript

(6)

Módulo III – Criação de Páginas Web E-m @i l: ri card o64 49 @gm ai l.c om VRML

Virtual Reality Modeling Language – linguagem de modelação da realidade virtual. Permite criar ambientes tridimensionais e interactivos para a Internet.

31

E-m @i l: ri card o64 49 @gm ai l.c om XML

 eXtensible Markup Language – é o formato

universal para partilha de dados entre aplicações. O conceito XML é simples e as possibilidades são

inúmeras. Documentos em formato XML podem conter: Bases de Dados, Transacções Comerciais, Catálogos de Produtos, Gráficos Vectoriais, Equações

Matemáticas, Fórmulas Químicas, Relatórios

Financeiros, Dados Bibliográficos, Anúncios

Publicitários, enfim, quase todos os dados estruturados, em documento de texto.

32

Técnicas de Implantação de Páginas Web

Linguagens de

Programação WYSIWYG Editor PáginaEstática Web

FTP

URL

Página Web _Dinâmica

33

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).

34

Editor WYSIWYG

What You See is What You Get- o que se vê é o que se obtém, permite inserir o conteúdo de forma gráfica, sendo o editor o responsável pela escrita do código.

Exemplo

 FrontPage, Dreamweaver

Kompozer

35

Técnicas de Implantação de Páginas Web – Editores Web O Bloco de Notas é um processador de texto

simples que permite inserir e formatar conteúdos utilizando o código HTML.

O Microsoft FrontPage, o Macromedia Dreamweaver e o Adobe GoAlive são editores de criação e gestão de páginas Web.

Os editores de criação e gestão de páginas permitem inserir e formatar o conteúdo de forma gráfica.

(7)

Linguagens de

Programação WYSIWYG Editor Página Estática Web

FTP

URL

Página Web _Dinâmica

37



Página

Web

Estática

São páginas ou documentos HTML cuja a informação que as constitui é enviada sempre da mesma forma quando um utilizador visita as Páginas Web, ou seja, as páginas enviadas não dependem da interacção do utilizador.

38

Técnicas de implantação de páginas Web



Página

Web

Dinâmica

São páginas HTML ou DHTML ou outra linguagem em que a informação enviada para o utilizador depende de algum tipo de interacção deste com as páginas que lhe são apresentadas, ou seja, uma parte da informação apresentada é construída em tempo real e como resposta a pedidos introduzidos pelo utilizador.

39

Linguagens de

Programação WYSIWYG Editor PáginaEstática Web

FTP

URL

Página_Dinâmica

Web

40



URL

Qualquer Páginas Web construída só fica acessível aos utilizadores quando alojada num servidor e no qual lhe é atribuído um endereço ou URL (Uniform Resource Locator).

41

http://www.ccipd.pt/



FTP

File Transfer Protocol - protocolo de transferência de ficheiros. Forma rápida e versátil de transferir ficheiros.

(8)

O WS FTP é um programa simples que permite fazer a ligação a um servidor de páginas Web.

O Cute FTP é um programa de transferência de ficheiros que permite retomar um download interrompido.

O CRT-Secure é um programa que permite a transferência segura de ficheiros.

43

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:

Corel Draw;

JASC Paint Shop Pro;

Adobe Photoshop;

GIMP.

44

São programas que permitem manipular imagens ou fotografias, usando ferramentas poderosas

Editores de Animação Gráfica

 Para criar animações existem vários programas, como por exemplo:

 O Macromedia Studio MX 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.

45

Regras Básicas de Criação de Páginas Web

Página de Entrada Fonte Cores Imagens Vídeo e áudio Molduras Tabelas 46

 Princípios gerais a ter em conta quando se cria uma

página para a Web:

1. 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.

2. 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.

47

3. 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.

4. 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.

5. 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

(9)

6. Molduras: usar no caso de haver conteúdos fixos e de controlo de

navegação.

7. Tabelas: no Word, a largura disponível para o texto é fixa e depende da

largura da página. No editor de páginas Web 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.

49

Avaliação de Páginas Web

Clareza e Objectividade da Informação

QualidadeGráfica

Usabilidade

Amigabilidade

Portabilidade

50

Clareza e objectividade da informação

:

As páginas Web são claras quanto às

suas mensagens?

A informação apresentada é objectiva?

51

Qualidade Gráfica

As Páginas Web têm boa apresentação gráfica? Os conteúdos estão bem distribuídos?

A disposição dos elementos multimédia está feita de

forma agradável, harmoniosa?

As cores estão usadas de forma criteriosa, de modo a

destacar e favorecer a informação ou prejudicam a

leitura?

52

Usabilidade

As páginas demoram muito ou pouco a ser

carregadas pelo Browser?

Se usarmos o browser em modo de texto, existe texto alternativo às imagens?

As hiperligações são fáceis de reconhecer e de

compreender para onde reenviam?

53

Avaliação de Páginas Web- Usabilidade

 Técnicas que ajudam os seres humanos a realizarem tarefas em meios gráficos (Web) de computador.

 A usabilidade contempla 8 regras

 Na Internet é o utilizador quem manda  A qualidade baseia-se na rapidez e confiança  Segurança

 A confiança custa a conquistar e pode-se perder num simples link quebrado  Simplifique, reduza e optimize

 Conclusões no início

 Evite fazer perder tempo às pessoas  Bons conteúdos

(10)

Amigabilidade

As páginas estão acessíveis a todos os utilizadores?

As páginas Web têm interesse para todos os utilizadores?

Para que tipo de utilizadores pode ter interesse?

Quais os motivos de interesse das Páginas Web?

55

Amigável

56

 Não Amigável

57

Ergonomia

Definição

• Regras de adaptação entre o trabalhador e os

instrumentos de trabalho.

Ergonómico

• Equipamento adaptado às características e

necessidades do utilizador.

58

Portabilidade

Definição

• Capacidade das Páginas Web se

adaptarem aos diferentes Web browsers.

59

Uma Página Web deve ser:

(11)

Módulo III – Criação de Páginas Web E-m @i l: ri card o64 49 @gm ai l.c om Mapa Mental 61