Escolar Documentos
Profissional Documentos
Cultura Documentos
Manual Padrões Construção Websites
Manual Padrões Construção Websites
Manual Padrões Construção Websites
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<n>: uma imagem de 1x1 pixel, sendo que variando a cor. <n> um
nmero crescente que comea de 01.
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
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
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.