Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Unidade III
Implementando o sítio
Escolhendo o editor de páginas HTML
Dentre a extensa gama de editores de páginas em HTML, abordamos
sucintamente alguns desses programas que possuem as características
necessárias para que você, cursista, possa elaborar a criação de um sítio Web
simples. Salientamos que é de sua livre escolha usar o programa que mais lhe
convier; contudo, adotaremos o BrOffice Writer como programa-padrão de
edição de páginas.
A seguir, estão dispostos alguns comentários sobre os programas de editoração
Web, onde consegui-los e para quais sistemas operacionais estão disponíveis.
OpenOffice/BrOffice Writer
Esse programa, na realidade, é um processador de texto que incorpora um
"Assistente da Web" com uma interface bastante amigável. Esse software é
recomendado para a criação de páginas para a Web por sua interface e facilidade
de utilização.
•
•
Onde baixá-lo: http://www.broffice.org.br/download (para acessar este link,
você precisa estar conectado à Internet)
Plataforma(as): MS-Windows e GNU/Linux
Bluefish
É considerado um ótimo software para o desenvolvimento de sítios da Web;
contudo, o processo de instalação e configuração exige um domínio razoável para
a instalação no sistema operacional GNU/Linux, exceto para as distribuições do
GNU/Linux que possuem os pacotes específicos.
•
•
Onde baixá-lo: http://bluefish.openoffice.nl/ (para acessar este link, você
precisa estar conectado à Internet)
Plataforma(as): GNU/Linux (com Gnome)
Nvu (ou N-view)
-1-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Esse é um programa muito popular entre os usuários do GNU/Linux que trabalham
com o desenvolvimento de sítios Web. Exige o mesmo domínio do processo de
instalação para o sistema operacional Linux que o software Bluefish; contudo,
possui um sistema instalador para aqueles que utilizam o sistema operacional MSWindows, que torna fácil sua instalação. Esse software também é recomendado
para a criação de páginas Web, pela sua interface e pelos seus recursos. A versão
mais recente desse software é a 1.0.
•
•
Onde baixá-lo: http://www.nvu.com/ (para acessar este link, você precisa
estar conectado à Internet)
Plataforma(as): MS-Windows e GNU/Linux
Quanta Plus
Esse talvez seja um dos programas mais versáteis para a edição de páginas em
HTML na plataforma GNU/Linux. Contudo, exige o mesmo domínio do processo de
instalação para o sistema operacional GNU/Linux que os programas Bluefish e Nview. Entretanto, existem algumas distribuições do GNU/Linux que já possuem os
pacotes específicos para a instalação desse programa.
•
•
Onde baixá-lo: http://quanta.kdewebdev.org/releases.php#stable
acessar este link, você precisa estar conectado à Internet)
Plataforma(as): GNU/Linux (com KDE)
(para
Existem também outros editores de páginas HTML no mercado, bastante
utilizados, com bons recursos de edição e integrados a diferentes tecnologias. São
exemplos desses programas o Macromedia Dreamweaver® e o MS-Microsoft
FrontPage®. É importante lembrar que esses programas não são gratuitos,
havendo necessidade de licença específica para seu uso.
Preparação para a montagem do sítio
Após ter lido o material sobre a produção de sítios Web, você, cursista, terá
condições de elaborar um sítio Web simples, mesmo considerando a existência de
uma gama de conhecimentos específicos que profissionais da área de Webdesign
possuem sobre a construção de sítios na Web. É importante tomar conhecimento
do processo de montagem de um sítio Web, de maneira que esse conhecimento
adquirido lhe sirva como apoio no processo de construção e manutenção do sítio
Web da sua escola.
Começaremos a praticar utilizando os conhecimentos adquiridos nessa oficina
tecnológica, elaborando um sítio Web simples para uma escola fictícia, chamada
Escola Municipal Exemplo.
-2-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Esse é o momento inicial em que você, cursista, irá reunir as informações que
serão utilizadas na construção do sítio Web da sua escola e organizá-las em
seções (tópicos) e subseções do sítio, como, por exemplo:
1. Materiais reunidos durante o processo de discussão entre você, diretor(a),
professores, estudantes, funcionários e pais que são os membros da comunidade
escolar. Esse material (fotos, áudios, vídeos, artigos pedagógicos, história da
escola, calendário escolar etc.) necessita estar digitalizado.
É importante lembrar a Lei do Direito Autoral (Lei no 9.610/98), pois no momento
em que algum material (artigos, teses, ensaios, trabalhos etc.) contiver sua
autoria sinalizada, e que tal material seja considerado para a publicação no sítio
da escola, será necessário obter a autorização para utilização de tal material, de
forma a resguardar tanto os direitos do autor quanto os da escola e dos
responsáveis pelo sítio na Web, ao divulgá-lo.
No caso de materiais já expostos na Internet, não existe a necessidade dessa
formalização; contudo, deve-se citar a fonte e a autoria do material utilizado,
como, por exemplo, arquivos publicamente expostos em outros sítios de domínio
público na Internet. Não podemos esquecer o Artigo 20 da Lei no 10.406/02
(Código Civil Brasileiro), que trata do Direito à Imagem, referente à exposição
visual de pessoas - de qualquer faixa etária - e à proibição para fazer uso dessa
imagem, seja em fotografias, seja em vídeos (em ambos os casos, analógicos ou
digitais).
É importante categorizar todos os arquivos digitais, de acordo com os tipos de
arquivos e assuntos, criando pastas (diretórios) no computador onde estará sendo
construído o sítio Web da sua escola. Observe a tabela abaixo:
Tipos de arquivos
Pasta onde serão armazenados os arquivos
Arquivos de fotos
imagens
Diagramação do sítio
layout
Textos em geral
textos
Vídeos
vídeos
Áudios
áudios
2. Após categorizar os materiais que serão utilizados na construção do sítio da
escola, é fundamental padronizar a formatação dos textos (quanto ao tipo de
fonte, tamanho e cores), imagens (quanto às dimensões e à disposição nas
páginas), áudios (quanto à nitidez, volume e duração) e vídeos (resolução, volume
do áudio, se for o caso, e duração).
-3-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
O tamanho dos arquivos (de imagens, de áudio, PDF etc.) deve ser compatível
com os limites estabelecidos para o tamanho máximo aceitável pelo ambiente em
que serão hospedadas as páginas do sítio da Escola (300KB, 1MB, 2MB etc.).
Sugerimos logo abaixo alguns referenciais de tamanhos de arquivos, de acordo
com os seus respectivos tipos:
Referencial
de tamanho
máximo
Tipo
Vídeo/animação
2MB
Áudio
2MB
Imagem
100KB
Texto
1,5MB
Quanto à formatação dos textos e de todos os arquivos armazenados nas suas
respectivas pastas, sugere-se que contenham o mesmo tipo de fonte de texto e as
mesmas simbologias.
Os arquivos de imagens que serão utilizados no corpo das páginas do sítio Web
deverão estar em harmonia com os textos da página e adequadamente
dimensionados, o que veremos logo mais.
Observação: evite sempre o emprego da acentuação nos nomes de arquivo e
espaço entre palavras, pois pode causar problemas de interpretação pelo servidor
que hospedará as páginas em HTML. Sugerimos nomes de arquivos como este, por
exemplo: tecnologia_na_educacao.pdf.
3. Estruture como serão encadeadas as seções e subseções do sítio Web da sua
escola, de tal maneira que contenham todos os materiais que serão utilizados,
nomeando essas seções com palavras taxonômicas, como nos exemplos abaixo:
Frases, idéias etc.
Expressão taxonômica
“História da escola”
Histórico
“Notícias internas e externas da Notícias
escola”
“Homenagens prestadas”
“Trabalhos
professores”
criados
Homenageados
pelos Produção docente
“Calendário anual de atividades Calendário escolar
escolares”
-4-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
“Fotos da escola, professores e Galeria de fotos
funcionários”
“Envie uma mensagem para a Fale conosco
nossa escola”
4. Agora você já tem o primeiro item do sítio Web criado e chama-se “menu”. O
“menu” contém todas as seções principais que serão visualizadas pelo leitor.
Observe como ficou o “menu” da Escola Municipal Exemplo:
5. Ainda no processo de estruturação, é interessante criar um “Mapa do sítio”, no
qual estarão dispostas as seções e subseções para que o leitor possa ter acesso
rápido e uma visão geral do conteúdo do sítio Web.
Exemplo de Mapa do Sítio:
-5-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Instalação do BrOffice
O processo de instalação é simples, envolvendo alguns passos e, dependendo do
microcomputador, pode ser bem rápido. Abaixo temos a tela inicial de instalação
de programas do BrOffice.
-6-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Clique no botão Avançar para prosseguir entre as telas do processo de instalação
do BrOffice. Marque a opção “Aceito os termos de contrato da licença” e continue
clicando mais uma vez no botão Avançar. Logo em seguida, preencha os campos
com o seu nome e o nome da sua Escola e, por fim, clique no botão Avançar em
duas telas seguidas para então clicar no botão Instalar, efetuando assim o início
da instalação da suíte de programas. Clique no botão Concluir para fechar a
última janela.
Configuração do BrOffice
Após o processo de instalação dos programas BrOffice, existe ainda uma etapa
que deve ser realizada antes da utilização do programa Writer. Observe na tela
abaixo as etapas da configuração, antes da utilização do programa.
A primeira etapa denomina-se Bem-vindo ao BrOffice.org 2.1. Clique em
Próximo, nesta tela e, na etapa seguinte, em Contrato de Licença. Clique em
Rolar para baixo até o final do texto e clique em Aceitar. Na etapa Nome do
Usuário, preencha os campos com seu nome, sobrenome e iniciais e clique em
Próximo. Na última etapa, Registro, escolha se deseja registrar-se no momento,
mais tarde, se não quer registrar-se ou se já é registrado, e finalmente, clique em
Concluir.
-7-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Conceitos importantes
A seguir, existe um modelo das etapas mais importantes do processo de criação
da concepção visual do sítio. Lembramos que a proposta desta sala é proporcionar
uma visão superficial em relação a todo o detalhamento teórico, que envolve a
criação de um sítio na Web.
Levando em consideração o modelo acima, podemos estabelecer as seguintes
etapas:
I. Necessidades da escola / Objetivos do sítio e Requisitos de conteúdo:
nessas primeiras etapas, acontecem reuniões cujo objetivo é prospectar as
necessidades da escola, em que todos os envolvidos na confecção do sítio da
escola deverão expor suas necessidades e seus desejos, buscando um consenso
quanto às funcionalidades e ao que será disponibilizado publicamente.
Considere também a questão da inclusão de áudios, vídeos e fotografias digitais
(ou digitalizadas) que possam identificar pessoas, pois nesse caso também é
necessário obter autorização para a utilização desses materiais (Código Civil
Brasileiro - Lei no 10.406/02, art. 20).
Evite ao máximo a utilização de materiais que, por algum motivo, contenham
marcas comerciais visíveis, salvo no caso em que façam parte de algum programa
vinculado oficialmente.
II. Arquitetura da informação: é o desenho estrutural do espaço da
informação, facilitando o acesso intuitivo ao conteúdo, ou seja, tanto à disposição
dos links internos ao sítio, como aos links externos. Nessa etapa, deve-se
estabelecer o fluxo e a navegação no sítio, de tal forma que a(s) informação(ões)
-8-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
aí distribuída(s) seja(m) rapidamente acessada(s), sem que o usuário perca a
referência de onde se encontra e, ao mesmo tempo, também possa navegar
dentro de outras seções sem perder a referência inicial. O mapa do sítio e os
botões de navegação interna desempenham esse importante papel e devem ser
utilizados na construção de sítios.
III. Concepção final da interface: nesta última etapa, existe a preocupação
com o design dos elementos da interface, de modo a facilitar a navegação do
usuário em meio à arquitetura da informação, aplicando-se um tratamento visual
aos elementos gráficos da página, textos e componentes de navegação, de forma
a estabelecer uma harmonização de cores agradáveis à navegação do usuário no
espaço do sítio, criando ao mesmo tempo a identificação/associação visual desses
elementos com as cores, logotipo, marca etc., da Escola.
Atividade complementar 1
Converse com profissionais de informática que desenvolvem trabalhos na área de
criação de sítios na Web acerca das diferentes tecnologias usadas em sua
construção, bem como sobre as diferentes possibilidades na criação de conteúdos
multimídia para a utilização como material no sítio da sua Escola. Poste na Base
de dados “Atividade complementar 1” um breve resumo de uma ou mais
páginas que relate essa experiência.
Assistente para criação de páginas da Web
Nessa parte, concentraremos todo o material elaborado para a criação das páginas
HTML de cada seção do sítio. Ao final do processo, obteremos o sítio Web
praticamente finalizado e pronto para sua publicação, precisando apenas de
pequenos ajustes.
O BrOffice dispõe de um “Assistente da Web” que possibilita a criação rápida de
um sítio simples para a Web, a partir de arquivos pré-formatados no próprio
processador de textos Writer (.odt). Esse programa possui um “Assistente de
criação de páginas Web”, como foi explicado na seção Escolhendo o editor de
páginas HTML (página 1), o que facilitará a elaboração do sítio Web da sua escola
-9-
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
a ser produzida, em breve, por você, como uma das atividades desta Sala
Ambiente.
É bom esclarecer que podemos usar qualquer outro programa de criação de
sítios Web.
Observe a estrutura de pastas criadas, conforme foi citado no início desta seção, e
a numeração colocada na frente de cada arquivo de texto, o que facilitará a ordem
no momento da adição de conteúdos do sítio.
Dentro da estrutura de pastas/diretórios que você irá gerar, crie uma pasta
nomeando-a “páginas_HTML”, que será utilizada para salvar todo o conteúdo do
sítio Web da escola.
ATENÇÃO:
Caso já existam textos produzidos em outro processador de textos que não seja
o Writer, abra o arquivo no processador de texto em que foi produzido, selecione
todo o texto, copie-o, abra o Writer e cole-o na área de texto do Writer,
posteriormente salve o arquivo com o formato .odt na pasta “páginas_HTML”
para que possamos criar o sítio através do Writer. Veja aqui um exemplo deste
procedimento.
Use o tutorial a seguir para visualizar como criar a estrutura básica do sítio Web.
Clique aqui para assistir à criação do Sítio através do “Assistente da Web” do
Writer.
Pequenos ajustes
Após ter concluído a criação do sítio Web da Eescola Municipal Exemplo e ter salvo
os arquivos em um local conhecido no computador, podemos verificar como ficou
a estrutura do sítio acessando a pasta/diretório “páginas_HTML”. Note que existem
alguns arquivos criados pelo “Assistente da Web”, em especial os arquivos
index.html, mainframe.html e tocframe.html (sendo estes dois últimos criados
devido à escolha do estilo realizada no assistente de página Web do Writer).
Existem também duas pastas importantes dentro de “páginas_HTML”: content e
images.
- 10 -
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Todas as imagens que serão utilizadas no sítio Web da escola devem estar na
pasta images. Portanto, as fotografias, o logotipo da Escola, ou qualquer outra
imagem que será utilizada devem ser copiadas nessa pasta. A pasta content
contém todos os arquivos .odt que foram convertidos pelo “Assistente da Web”
para o formato HTML. Se por acaso for necessário acrescentar mais algum
conteúdo (.odt) no sítio Web, é preciso “salvar como” HTML (no campo “Salva
como tipo:”, escolha HTML) dentro dessa pasta.
É necessário esclarecer que apenas o conteúdo do diretório/pasta páginas_HTML
será enviado para publicação. Sendo assim, os arquivos que estiverem fora desse
diretório não serão visualizados quando a página estiver hospedada em um
servidor. Para evitar que ocorra algum erro (como não aparecer determinada
imagem ou texto), antes de iniciar a criação dos textos para o sítio, crie a
estrutura de pastas (como mostra a figura abaixo) e insira todo o conteúdo
separado para o sítio dentro dessa estrutura, como foi visto no início desta seção.
Na maioria dos sítios criados na Web, o arquivo inicial (página de abertura) do
sítio pode ser o index.htm, index.html, default.htm, ou ainda default.html. Os
browsers (paginadores) procuram por um desses arquivos automaticamente ao
tentarem acessar um sítio na Web e, ao encontrá-los, mostrarão o seu conteúdo.
No caso desse sítio Web criado, o arquivo index.html contém o menu lateral
esquerdo (conteúdo do arquivo tocframe.html) – e todas as seções – escolhido
inicialmente na diagramação do sítio (layout). O arquivo mainframe.html contém a
primeira página, a porta de entrada do sítio da escola e, como tal, é interessante
que essa página seja editada através do próprio Writer, inserindo na página uma
mensagem de boas-vindas associada a uma foto da escola ou ao logotipo da
mesma. Após ter feito isso, basta salvar novamente e todas as seções já estarão
finalizadas no formato HTML.
- 11 -
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Clique aqui para assistir ao tutorial que mostra como alterar a página
mainframe.html, utilizando o Writer. (Parte 1)
Clique aqui para assistir ao tutorial que mostra como alterar a página
tocframe.html, utilizando o Writer. (Parte 2)
Clique aqui para assistir ao tutorial que mostra como inserir seções no menu do
tocframe.html, utilizando o Writer. (Parte 3)
Atividade obrigatória 3
Após termos visto os conceitos básicos da Internet e as recomendações para
estruturação de sítio Web, já reunimos elementos suficientes para a criação de
um sítio Web.
Produza o sítio Web da sua Escola contendo as seções por você escolhidas,
seguindo todas as etapas expostas.
Compacte a pasta que contém todos os arquivos do sítio Web da sua Escola em
um arquivo nomeado páginas_HTML.zip, e envie para a Base de dados
“Atividade 3”.
Para uma breve explanação sobre compactação de arquivos clique aqui.
HOLZSCHLAG, M. E. 250 segredos para Web designers. 1 ed. Rio de Janeiro:
Elsevier, 2004.
ZELDMAN, J. Projetando Web sites compatíveis. 1 ed. Rio de Janeiro: Campus,
2003.
- 12 -
Escola de Gestores
Curso de Especialização em Gestão Escolar
Sala Ambiente Oficinas Tecnológicas - Construindo Sítios na Web
Portal Domínio Público (para acessar este link, você precisa estar conectado à
Internet).
Acessibilidade Brasil (para acessar este link, você precisa estar conectado à
Internet).
Introduction to Web Accessibility (para acessar este link, você precisa estar
conectado à Internet).
NIELSEN, J. Projetando websites. 2 ed. São Paulo: Campus, 2001.
WILLIAMS, R.; TOLLETT, J. Web design para não designers. 2 ed. São Paulo:
Ciência Moderna, 2001.
- 13 -