Manual de Padres de Construo

de Websites (MPCW)

11/03/2005

INDICE
INDICE............................................................................................................. 2
OBJETIVO......................................................................................................... 3
ESTRUTURA DE PASTAS.........................................................................................3
NOMENCLATURA DE ARQUIVOS...............................................................................3

Default...................................................................................................... 4
Formulrios................................................................................................ 4
NCLEO........................................................................................................... 4

Pasta
Pasta
Pasta
Pasta
Pasta

IMGS................................................................................................. 4
INCS.................................................................................................. 5
SWF.................................................................................................. 5
JS..................................................................................................... 5
CSS................................................................................................... 5

Pasta TEMPLATES........................................................................................... 6
MODELOS......................................................................................................... 6
DOCUMENTAO................................................................................................ 7

Arquivos e Pastas........................................................................................7
Cdigo....................................................................................................... 7

Objetivo
Este documento tem como objetivo traar e formular padres e regras para o
desenvolvimento de Websites.
A padronizao permite maior produtividade, maior grau de reutilizao, uniformidade
de cdigo acessvel a todos os membros da equipe de desenvolvimento e um baixo custo
de manuteno para o cliente. O padro interno de desenvolvimento consolidado resulta
em uma maior qualidade dos produtos desenvolvidos.
Este documento tem como objetivo tambm trazer um maior entrosamento entre os
integrantes das equipes de desenvolvimento: lderes de projeto, analistas de sistemas,
analistas de sistemas trainee, etc.
Estrutura de Pastas
Para manter a uniformidade de todos os projetos web, os sites desenvolvidos pela NETRA
devero ter a seguinte estrutura de pastas na raiz do site:
Pasta
Capa
Ncleo
<nomedaarea>

Funo
Conter os arquivos relacionados com a capa do Website
Conter as subpastas: incs, imgs, css, js, swf e templates.
Conter os arquivos relacionados com a rea.

* Nas pastas Capa e <nomedaarea> podem conter as subpastas da pasta ncleo, caso
existam arquivos que s essa rea use ou necessite.
* No caso do produto Portal usado em cada rea a pasta ncleo com as subpastas.

Nomenclatura de Arquivos
O arquivo padro ter o nome default. Esse arquivo estar na raiz do Website e nas
pastas <nomedaarea>. Caso a rea contenha vrios tens, essas pginas devero ter a
nomenclatura de acordo com o contedo.
Ex.

E m p re s a
I n s t i t u c io n a l
H i s t r i c o
O rg a no gra m a
F a le C o n o s c o

Caso o default da rea no tenha contedo ele poder ser eliminado, ficando s os
arquivos relacionados aos itens da rea.
Default
O default do Website dever ser uma pgina com dois frames, um chamando capa/blank
e outro chamando capa/default.
Formulrios
As nomenclaturas das pginas de formulrio devero ser da seguinte forma:
Caso a rea seja s do formulrio
Default pgina com o formulrio
Done pgina de resposta de sucesso
Caso a pgina seja um item de uma rea
<nomedoformulario> - pgina com o formulrio
<nomedoformulario>+done pgina de resposta de sucesso
* Nas pginas de cadastro, devero ser uma rea e as pginas tero a nomenclatura de
acordo com o contedo da pgina e a pgina default.
Global
Pasta IMGS
As imagens relacionadas com o Website estaro nessa pasta. A pasta imgs poder ser
usada como subpasta de uma rea, caso ela necessite (se as imagens esto diretamente
relacionadas com a rea e no sero usadas em outra rea do Website).
A nomenclatura das imagens fica a cargo do Webdesigner, sendo que algumas imagens
tero de ter a nomenclatura padro.

px: O px uma imagem de 1x1 pixel transparente.

px<n>: uma imagem de 1x1 pixel, sendo que variando a cor. <n> um
nmero crescente que comea de 01.

bg: Essa imagem est relacionada com o background da pgina. A

nomenclatura ser bg_<funcao>_<posio e/ou numerao>.

Nome da Funo
menu
cham
body
Td
Tit
box

Funo
Imagem
Imagem
Imagem
Imagem
Imagem
Imagem

relacionada
relacionada
relacionada
relacionada
relacionada
relacionada

com o menu
com as chamadas
com o background da pgina
a clula da tabela
com o ttulo
com a tabela

tit: Imagem relacionada com o ttulo de uma pgina. A nomenclatura ser

tit_<nomedottulo>.

teste<n>: Essa imagem utilizada para preencher o layout para vizualizao,

e no ser utilizada depois. Sendo assim, na homologao do Website, essas
imagens devero ser apagadas do servidor. <n> um nmero crescente que
comea de 01.

Outras imagens podero ficar a cargo do Webdesigner dar o melhor nome para
identifica-las.

Pasta INCS
Nessa pasta vo ficar os includes do Website. funo do Webdesigner verificar a melhor
forma de usar os includes, para facilitar a manuteno ou implementao do sistema.
* No caso especfico do SGC, tudo que ser gerado pelo sistema dever ser feito um
include.
Alguns includes importantes: topo, rodap, menu, chamadas, logomarca, assinatura, e
outros.
A nomenclatura dos includes fica de acordo com a funo. Temos 4 tipos de includes:
Include
pgina

de Est relacionado ao contedo da pgina. A nomenclatura dever ser

cont_<nomedapagina>. Esse include ficar na pasta inc, da rea dessa
pgina.
Include
de Est relacionado as chamadas do Website, ele fica na pasta inc da
chamada
rea da pgina. Se o include for usado em outra reas do site, ele
ficar na pasta incs no ncleo do Website.
Include de layout Os includes de layout so usados no Website inteiro, tem a funo de
separar partes do layout para facilitar a manuteno. Ex.: Topo,
rodap, assinatura, menu.
Include
de No ncleo do Website dever conter o arquivo de variveis que
variveis
contem as variveis que sero usadas no Website. O arquivo se chama
variveis. No caso de canais de portais usa-se o variveis do portal e o
var_canal.
Pasta SWF
Nessa pasta vai conter todos os arquivos Flash. A nomenclatura fica de acordo com a
funo do arquivo.
Pasta JS
Nessa pasta vai conter todos os arquivos de JavaScript. A nomenclatura fica de acordo
com a funo do arquivo.

Pasta CSS
Nessa pasta vo estar os arquivos de estilo do Website, onde o nome do arquivo ser o
nome do Website. Nenhum estilo dever ser colocado direto no cdigo da pgina, os
estilos devero ser colocados atravs do class ou id.
A nomenclatura dos estilos dever seguir o padro <nomedowebsite>_<funo>_<n>. O
<nomedowebsite> so duas letras que indicam o nome do Website em letras maisculas,
<funo> de acordo com a tabela a baixo e <n> um nmero crescente comeando de
01.
Nome da Funo Funo
Cor
Defini cor de background e/ou texto
Txt
Define tamanho de texto e cor
Lnk
Define tamanho e cor de links
Bg
Define cor ou imagem de background
Tit
Define tamanho e cor de ttulos
Box
Define cor, formato e tipo de linhas de tabela. Poder definir tambm
dor de background.
* Se o Webdesigner necessitar de outras nomenclaturas para outros estilos, poder
acrescentar sendo que o nome tem de estar de acordo com a funo.
O Webdesigner dever declarar tambm todas os estilos das tags:
Body
Td
Input
a
Outros

Definir no mnimo
Definir no mnimo
Definir no mnimo
Definir no mnimo
Se necessrio

background e fonte.
fonte.
fonte, background e linhas.
fonte e estilo do link.

Dever tambm existir um estilo no_class, que ser usado para definir a ausncia de
estilo.
O arquivo de css dever sempre estar agrupado por funo e comentado. Um exemplo
tirado do site da NETRA:
/* Estilo dos Backgounds */
.NE_bg_01 { background: #F3F3F7; height: 24px; }
.NE_bg_02 { background: #C6CFDE; }
/* Estilo dos Textos */
.NE_txt_01 { font: 8pt Arial, sans-serif; color: #FFFFFF; }
.NE_txt_02 { font: bold 8pt Arial, sans-serif; color: #FFFFFF; }

Pasta TEMPLATES

Nessa pasta ir conter os arquivos de template do portal, o nome estar de acordo com
a funo do template.

Modelos
Os modelos para a construo de um Website esto no servidor Netra-InHouse, na pasta
criao/modelos. Onde existem 2 modelos para a construo de Websites: Website
independente e Canal.
Os modelos de produtos se encontram no servidor Netra-InHouse, na pasta inetpub.
Portal 2.0
Portal 3.0
Site de TV
Prmio
Publicitrio

/inetpub/PortalPronto
/inetpub/portaltec
/inetpub/TV Modelo 2.0
/inetpub/bahiarecall e
/inetpub/bahiarecall_votacao

portalpronto.netra.com.br
portaltec.netra.com.br
tvmodelo.netra.com.br
bahiarecall.netra.com.br

Documentao
Os arquivos devero ser documentados e organizados.
Arquivos e Pastas
Dever ficar no servidor final somente arquivos e pastas que realmente faro parte do
Website, todos os backups e arquivos temporrios devero ser apagados.
Cdigo
O cdigo dever ficar organizado e comentado para que a manuteno se torne fcil.