Tecnologias da Informao e da Comunicao 10 Ano

Criao de Pginas Web

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Pginas e Stios Web

Uma pgina Web um documento multimdia que contm hiperligaes. Um conjunto de pginas Web um stio (site) Web. O conjunto dos stios (sites) Web constitui a Web ou World Wide Web (WWW) que no mais do que um conjunto de documentos hipermdia unidos pelas hiperligaes que permitem a navegao com um simples clique do rato.

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Pginas Web
O que h dentro do documento criado como pgina Web?
Linguagem de programao: HTML (Hypertext Markup Language) 1993 outras.

Como criada uma Pgina Web?

Editores de Pginas: Editores de texto normal (Ex: Bloco de notas, word, etc.) WYSIWYG (what you see is what you get)
Ex: Microsoft Frontpage 2003 KompoZer

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Pginas e Stios Web

KompoZer uma verso no 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 Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web e documentos HTML que podem ser interpretados por navegadores.

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

KompoZer - Histria
Verso 0.7.1 8 de Julho de 2006:
SourceForge

Verso 1.7.5 14 de Julho de 2006:

SourceForge

Verso 0.7.7 23 de Julho de 2006:

SourceForge

Verso 0.7.10 30 de Agosto de 2007:

SourceForge
Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

KompoZer Vantagens e Desvantagens

Principal vantagem:
Fcil e intuitivo:
Qualquer pessoa conseguir de forma fcil criar uma pgina web com um aspecto profissional e sem necessidade de aprender a linguagem HTML. poderoso como o Dreamweaver open source disponvel para download gratuito

Principal desvantagem:
Compatibilidade e conhecimento:
Menor compatibilidade com outras aplicaes que iro ser utilizadas na criao do site. Fornece conhecimentos bsicos sobre a criao de Pginas Web.
Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

KompoZer - Concorrncia
Outros editores do tipo WYSIWYG:
Macromedia Dreamweaver Adobe GoLive

FrontPage
Etc. (http://en.wikipedia.org/wiki/list_of_html_editors)
Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Planeamento de um stio Web

O planeamento da pgina ou do stio a primeira tarefa a executar antes de utilizar o KompoZer. Para construir uma pgina devem ser feitas as seguintes perguntas:
qual o objectivo da pgina? a quem se dirige? que informao deve conter? que recursos grficos so necessrios? que estilo de pgina o mais adequado?
Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Planeamento de um stio Web

Outro aspecto importante o arranjo grfico do stio, o qual deve facilitar a navegao entre as pginas, nomeadamente atravs de:
cones claros e consistentes; identificao esquemtica dos menus; botes de navegao que permitam voltar pgina inicial ou ir at qualquer outra pgina do stio; ttulos, subttulos, cabealhos, rodaps e links bem visveis.

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Estrutura do stio - Hierarquia

Depois de definir o contedo do stio, necessrio organizar a informao a incluir nas pginas. Essa tarefa inclui a diviso da informao em unidades a incluir em cada pgina, o estabelecimento de uma hierarquia entre esses blocos de informao e, finalmente, a determinao das ligaes entre esses blocos de informao. Eis um exemplo:
Pgina principal

1. pgina

2. pgina

3. pgina 7. pgina

4. pgina

5. pgina

6. pgina

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Consistncia das pginas e do stio

Outro dos aspectos a ter em conta na construo de stios Web o da sua consistncia, isto , o de uma identidade visual prpria que se deve manter ao longo de todas as pginas para que o leitor encontre a informao que deseja utilizando sempre os mesmos procedimentos. Esta identidade visual conseguida atravs de:
Utilizao de molduras (frames) ou tabelas que dividem a pgina em reas para colocao de informao especfica; Localizao de ttulos em locais estratgicos; Disposio e organizao dos menus, dos cabealhos e rodaps;

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Consistncia das pginas e do stio

Ligaes e barras de ferramentas sempre nos mesmos locais; Cdigo de cores idntico em todas as pginas; Formatao de caracteres semelhante; Modelos de botes idnticos

Esta identidade grfica ajudar o leitor na navegao e no acesso rpido informao.

Criao de Pginas Web KompoZer

Tecnologias da Informao e da Comunicao 10 Ano

Consistncia das pginas e do stio

Na definio do aspecto visual do stio Web, a informao e os objectos devero estar organizados e dispostos em locais estratgicos conferindo assim uma identidade prpria. Um dos procedimentos que se deve adoptar a utilizao de molduras ou tabelas que estruturam a pgina em reas de informao separadas, como pode ser visto nos exemplos seguintes:

Criao de Pginas Web KompoZer