Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de...

13
Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer

Transcript of Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de...

Page 1: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Criação de Páginas Web

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 2: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Páginas e Sítios Web

Uma página Web é… …um documento multimédia que contém hiperligações.

Um conjunto de páginas Web é……um sítio (site) Web.

O conjunto dos sítios (sites) Web constitui……a Web ou World Wide Web (WWW) que não é mais do que um conjunto de documentos hipermédia unidos pelas hiperligações que permitem a navegação com um simples clique do rato.

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 3: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Páginas WebO que há dentro do documento criado como página Web?

Linguagem de programação: HTML (Hypertext Markup Language) – 1993 outras.

Como é criada uma Página Web?

Editores de Páginas: Editores de texto normal (Ex: Bloco de notas, word, etc.) WYSIWYG (what you see is what you get)

Ex: Microsoft Frontpage 2003 KompoZer

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 4: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Páginas e Sítios Web

KompoZer é… …é uma versão não oficial do software Nvu(n-view), da

Linspire(é um sistema operativo tipo Linux intuitivo com um ambiente de trabalho semelhante ao Windows XP).

Nvu (pronuncia-se n-view)……um editor HTML.

HTML(HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto)…

… é uma linguagem de marcação utilizada para produzir páginas na Web e documentos HTML que podem ser

interpretados por navegadores.

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 5: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

KompoZer - HistóriaVersão 0.7.1 – 8 de Julho de 2006:

SourceForge

Versão 1.7.5 – 14 de Julho de 2006:SourceForge

Versão 0.7.7 – 23 de Julho de 2006:SourceForge

Versão 0.7.10 – 30 de Agosto de 2007:SourceForge

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 6: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

KompoZer – Vantagens e DesvantagensPrincipal vantagem:

Fácil e intuitivo:• Qualquer pessoa conseguirá de forma fácil criar uma página

web com um aspecto profissional e sem necessidade de aprender a linguagem HTML.

• É poderoso como o Dreamweaver • É open source disponível para download gratuito

Principal desvantagem:Compatibilidade e conhecimento:

• Menor compatibilidade com outras aplicações que irão ser utilizadas na criação do site.

• Fornece conhecimentos básicos sobre a criação de Páginas Web.

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 7: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

KompoZer - ConcorrênciaOutros editores do tipo WYSIWYG:

Macromedia Dreamweaver

Adobe GoLive

FrontPage

Etc. (http://en.wikipedia.org/wiki/list_of_html_editors)

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 8: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Planeamento de um sítio WebO planeamento da página ou do sítio é a primeira tarefa a executar antes de utilizar o KompoZer.

Para construir uma página devem ser feitas as seguintes perguntas:

qual o objectivo da página?a quem se dirige?que informação deve conter?que recursos gráficos são necessários?que estilo de página é o mais adequado?

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 9: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Planeamento de um sítio WebOutro aspecto importante é o arranjo gráfico do sítio, o qual deve facilitar a navegação entre as páginas, nomeadamente através de:

ícones claros e consistentes;

identificação esquemática dos menus;

botões de navegação que permitam voltar à página inicial ou ir até qualquer outra página do sítio;

títulos, subtítulos, cabeçalhos, rodapés e links bem visíveis.

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 10: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Estrutura do sítio - HierarquiaDepois de definir o conteúdo do sítio, é necessário organizar a informação a incluir nas páginas. Essa tarefa inclui a divisão da informação em unidades a incluir em cada página, o estabelecimento de uma hierarquia entre esses blocos de informação e, finalmente, a determinação das ligações entre esses blocos de informação. Eis um exemplo:

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Página

principal

1.ª página

2.ª página

3.ª página

4.ª página

5.ª página

6.ª página

7.ª página

Page 11: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Consistência das páginas e do sítioOutro dos aspectos a ter em conta na construção de sítios Web é o da sua consistência, isto é, o de uma identidade visual própria que se deve manter ao longo de todas as páginas para que o leitor encontre a informação que deseja utilizando sempre os mesmos procedimentos. Esta identidade visual é conseguida através de:

Utilização de molduras (frames) ou 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;

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 12: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Consistência das páginas e do sítio Ligações e barras de ferramentas sempre nos mesmos locais;

Código de cores idêntico em todas as páginas;

Formatação de caracteres semelhante;

Modelos de botões idênticos…

Esta identidade gráfica ajudará o leitor na navegação e no acesso rápido à informação.

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer

Page 13: Criação de Páginas Web Tecnologias da Informação e da Comunicação – 10º Ano Criação de Páginas Web – KompoZer.

Consistência das páginas e do sítioNa definição do aspecto visual do sítio Web, a informação e os objectos deverão estar organizados e dispostos em locais estratégicos conferindo assim uma identidade própria. Um dos procedimentos que se deve adoptar é a utilização de molduras ou tabelas que estruturam a página em áreas de informação separadas, como pode ser visto nos exemplos seguintes:

Tecnologias da Informação e da Comunicação – 10º Ano

Criação de Páginas Web – KompoZer