1. Objetivo
2. Definição do layout das páginas
3. Definição do layout do site
4. Automatizando a criação
5. Criando uma nova página no site
6. O que acontece quando digito `make`?
7. Mais algumas regras do Make
8. Transportando a página

1. Objetivo

Projetar um web site em grupo.

Esta atividade visa desenvolver as habilidades de trabalho em equipe, simulando uma situação real em uma empresa onde há tarefas a serem executadas e prazos a serem cumpridos.

2. Definição do layout das páginas

A figura abaixo mostra a estrutura escolhida para cada página do site. Pode-se observar as áreas principais:

• Cabeçalho: conterá informações de identificação do site
• Menus: local onde será inserido o mapa do site
• Rodapé: área de agradecimentos e Copyright.
• Personalizável: porção da página que será alterada

  

3. Definição do layout do site

A página inicial é nomeada como index.html. Todas as demais páginas terão a extensão htm.

As imagens são armazenadas num sub-diretório chamado images.

Todas as páginas do site se referenciam relativamente, ou seja, não é utilizada a URL completamente resolvida. Isto permite uma fácil navegação offline e independência de domínio.

4. Automatizando a criação

Para automatizar a criação e a manutenção das páginas deve-se separar os conteúdos comuns dos específicos de cada página.

Como solução foram adotados três arquivos para cada página a ser gerada.

• 000.htm - cabeçalho e os menus
• proto_nome_da_pagina.t2t - corpo da página
• 999.htm - rodapé

O arquivo proto_nome_da_pagina.t2t é processado com o aplicativo txt2tags gerando o arquivo nome_da_pagina.htm.

O arquivo 999.htm contém todos os encerrantes dos comandos iniciados no arquivo 000.htm, bem como agradecimentos e mensagens de Copyright.

Para esta página foram utilizados os seguintes arquivos:

• 000.htm (ver)
• 999.htm (ver)
• Makefile (ver)
• proto_cclabi_proj_site.t2t (ver)

5. Criando uma nova página no site

Uma vez criada a infra-estrutura mostrada no tópico acima o restante torna-se muito simples. Vamos criar a pagina chamada minhapagina.htm da seguinte forma:

• Criar um arquivo chamado proto_minhapagina.t2t
• No Makefile acrescentar uma linha contendo nome final da nova página.

proto_minhapagina.t2t

  Pagina de exemplo
  Nome do autor
  data de criação
  
  
  =Seção=
  
  ==Subseção==
  
  ===Subsubseção==
  
  **isto está em negrito**
  
  //isto está em itálico//
  
  __isto está sublinhado__
  
  [texto do link http:://endereço.do.link]
  
  [endereço/da/imagem]

Makefile

  paginas:  \
  	${HTMLDIR}/cclabi.htm \
  	${HTMLDIR}/cclabi_proj_site.htm \
  	${HTMLDIR}/cctecprogi.htm \
  	${HTMLDIR}/gpg.htm \
  	${HTMLDIR}/humor_visoes.htm \
  	${HTMLDIR}/humor_bandeira_espaco.htm \
  	...
  	${HTMLDIR}/minhapagina.htm \ 	
  	...
  	${HTMLDIR}/humor_informatica.htm \
  	${HTMLDIR}/LaTeX.htm \
  	${HTMLDIR}/ccteoi.htm \
  	${HTMLDIR}/vim.htm \

6. O que acontece quando digito `make`?

O comando make lê o arquivo Makefile, encontrando a linha

  all:correcao diretorios index imagens paginas estilo arquivos

correcao

  correcao:
    touch pagina.lex
    ispell -p pagina.lex *.t2t

diretorios

  diretorios:
    mkdir -p html/images

index

  index:
    install -v -m 666 index.html ${HTMLDIR}/index.html
    install -v -m 666 000.htm ${HTMLDIR}/000.htm.txt
    install -v -m 666 999.htm ${HTMLDIR}/999.htm.txt
    install -v -m 666 Makefile ${HTMLDIR}/Makefile.txt
    install -v -m 666 proto_cclabi_proj_site.t2t ${HTMLDIR}

imagens

  imagens:
    install -v -d -m 777 ${HTMLDIR}/images
    install -v -m 666 images/*{jpg,gif,png} ${HTMLDIR}/images

Exemplo existem os arquivos:

• images/cclabi_proj_site_layout_pagina.fig,
• images/cclabi_proj_site_layout_pagina.fig.bak e
• images/cclabi_proj_site_layout_pagina.png.

  Destes três, somente o de extensão png será copiado.

  paginas:  \
    ${HTMLDIR}/cienciacomp.htm \
    ${HTMLDIR}/cclabi.htm \
    ${HTMLDIR}/cclabi_proj_site.htm \
    ...

estilo

  estilo:
    install -v styles/style.css ${HTMLDIR}/style.css

arquivos

  arquivos:
  	tar zcvf files/dotvim.tgz ${HOME}/.vim ${HOME}/.vimrc
  	cp -r files html/
  	cp -r LaTeX html/

7. Mais algumas regras do Make

Foram criadas algumas regras para realizar a conversão dos arquivos t2t para htm.

Adequação ao padrão html 4.0.1

  ${HTMLDIR}/%.htm: 000.htm proto_%.htm 999.htm
    cat $^ \
     | sed "s/[sS][rR][cC]=\"images\/\(.*\)\(\....\)\"/src=\"images\/\1\2\" alt=\"[\1]\" /g" \
     | sed "s/[iI][mM][gG] [aA][lL][iI][gG][nN]=\"[cC][eE][nN][tT][eE][rR]\"/img/g" \
     | sed "s/\(<table cellpadding.4\) border.1>/\1>/" \
     | sed -e "s/cclabi_proj_site.htm/`echo $@ | sed "s/^html.//"`/" > $@

Conversão t2t para htm

  %.htm:  %.t2t
    ${TXT2TAGS} --toc -n -H -t html -o $@ $<

8. Transportando a página

Digitando make pak é gerado um arquivo contendo todo os fontes das páginas.

Digitando make final é gerado um arquivo contendo todo o site formatado (pronto para upload).