Palestra ministrada por Thiago Prado de Campos (UTFPR) sobre o Guia de Administração de sítios e a Cartilha de Codificação do e-PWG (Padrões Web em Governo Eletrônico). Evento: 13º Edição da Conferência sobre Portais Corporativos, 28 de abril, 2011.

1. A importância da boa codificação
Padrões Brasil e‐Gov
Thiago Prado de Campos
Analista de TI da UTFPR Londrina
www.thiagotpc.com

2. Padrões Brasil e‐Gov

3. O cenário
• Cada vez mais cresce o número de usuários de
internet no Brasil, e consequentemente a
procura por serviços de governo eletrônico;
• Os órgãos desenvolvem sites em busca de
publicidade e prestação de serviços ao
cidadão.
• Os profissionais responsáveis por TI nos
órgãos governamentais têm pouco
conhecimento sobre desenvolvimento web.

4. Entendendo melhor o cenário
• Era pré‐2002
– Muitos sites foram desenvolvidos sem o
conhecimento nenhum de padrões web,
acessibilidade e usabilidade.
• De 2002 a 2006
– Neste período o uso da web cresceu e surgiram
muitos estudos e pesquisas para melhorias na
qualidade de páginas web.
• Era pós 2007
– Praticamente todo serviço possui versão on‐line, todo
ser humano de país desenvolvido vai usar a web
algum dia e novos recursos estão a disposição.

5. Era Pré 2002
• Profissionais de Processamento de Dados
• Chegada da Internet no Brasil e troca de
liderança entre Netscape e Internet Explorer
• Popularidade da HTML 3.2, com recursos de
formatação embutidos na linguagem
– BLINK, MARQUEE, CENTER, FONT, bgcolor, etc.
• Primeiros editores WYSIWYG (What You See Is
What You Get)
– MS FrontPage, Allaire HomeSite, HotDog, ...
• Linguagens Perl e ASP para servidor

6. Era Pré 2002

7. Era Pré 2002

8. Era Pré 2002

9. Era 2002 a 2006
• Crescente número de profissionais em Ciência da
Computação, Engenharia da Computação e
Sistemas de Informação
• Popularização da HTML4 e XHTML1
• Predomínio do Internet Explorer 6 e 7
• Surgimento do termo tableless e crescimento do
editor Dreamweaver
• Boom da Internet comercial
• Linguagens PHP, Java e .net

10. De 2002 a 2006

11. De 2002 a 2006

12. Era pós 2006 aos dias atuais
• Profissionais de Tecnologia de Análise e Desenvolvimento
de Sistemas, Tecnologia em Sistemas para Internet, Design
Gráfico, Artes Visuais, Marketing, etc.
• Popularização da Internet Móvel (iPhone, Android, etc)
• Otimização para Ferramentas de Busca (SEO)
• Tendência de equilíbrio entre navegadores: Firefox,
Chrome e Internet Explorer
• Crescimento do uso de editores de código: Eclipse,
Netbeans, Aptana Studio, Notepad++, etc..
• Boom da Internet social
• Desenvolvimento da HTML 5 e CSS 3
• Novas linguagens para servidores web: RoR, Python

13. Era pós 2006 aos dias atuais

14. Era pós 2006 aos dias atuais

15. Era pós 2006 aos dias atuais

16. Era pós 2006 aos dias atuais

17. Por que uma Cartilha?
• Atualizar conhecimento;
• Orientar quanto ao uso das tecnologias
disponíveis e etapas de planejamento e
desenvolvimento de sítios;
• Padronizar uso de soluções;

18. Por que Consulta Pública?
• Abrir à participação popular;
• Compartilhar experiências;
• Identificar preocupações comuns;
• Evitar erros que podem passar despercebidos;
• Transparência na definição de diretrizes;

19. Objetivo da Cartilha de Codificação
• Detalhar boas práticas em
codificação para orientar
as equipes a fim de tornar
os sites do governo:
– Identificáveis;
– Portáveis;
– Relevantes;
– Acessíveis e
– Efetivos;

20. Diretrizes da Cartilha de Codificação
1. Páginas Leves
2. Separação da forma do
conteúdo
3. Páginas em
conformidade com os
padrões Web
4. Páginas independentes
de navegador e
plataforma

21. Diretrizes da Cartilha de Codificação
1. Tableless
2. CSS
3. HTML, CSS, HTTP,
sitemap, RSS,
microformats, etc.
4. Evite Flash, Silverlight,
etc. Use EcmaScript
não obstrutivo.

22. Algumas vantagens de um portal bem
codificado
• Independência de navegadores e plug‐ins
proprietários para apresentação e execução
• Facilidade de manutenção do código
• Melhor desempenho em computadores
antigos e conexões precárias
• Interoperabilidade com sistemas externos e
extratores de conteúdos

23. Objetivos do Guia de Administração
• Oferecer subsídios para:
– a concepção,
– desenvolvimento,
– manutenção e
– administração de sítios
de governo eletrônico na
esfera federal.

24. Diretrizes dadas pelo Guia de
Administração
1. O foco é o cidadão;
2. Manter recursos
adequados e objetivos
definidos;
3. Avaliar
constantemente a
eficácia;
4. Localização facilitada
do sítio e conteúdo;

25. Diretrizes dadas pelo Guia de
Administração
5. Permitir diversas formas
e dispositivos de acesso;
6. Não criar portais
semelhantes;
7. Respeitar direitos e
dados do cidadão;
8. Ouvir e dar retorno ao
cidadão e;
9. Ser confiável

26. Alguns benefícios de um sítio bem
planejado e mantido
• Proporciona melhor usabilidade;
• Executa melhor os papéis democráticos do
Estado:
– Publicidade
• torna o Estado mais visível ao cidadão
– Responsividade
• quando o Estado dialoga com os seus cidadãos
– Porosidade
• torna o Estado mais susceptível à opinião pública.

27. Como baixar e participar?
• http://www.governoeletronico.gov.br/acoes‐
e‐projetos/padroes‐brasil‐e‐gov
– http://bit.ly/egovbr

28. O que ainda falta avançar?
• Mais estímulo e comunicação entre
administração e desenvolvedores
– Investir em treinamento
– Participação ativa nas entidades de padronização
– Realização de eventos para divulgação de cases e
troca de experiências
• Fiscalização e cobrança
– Definição de metas
– Avaliação e publicação de resultados

29. O que ainda falta avançar?
• Envolvimento
– Integrar TI e Assessorias de Comunicação
– Com o uso de bons SGC (Sistemas Gerenciadores
de Conteúdos) fazer com que os próprios
detentores de informações e condução dos
processos publiquem e atualizem conteúdo nos
sítios.
• Plone, Joomla, Wordpress, etc...

30. Obrigado!
• Thiago Prado de Campos
– Analista de TI na UTFPR Londrina
– Coord. e Professor da Especialização em
Desenvolvimento Web da UTFPR Londrina
– Sócio da Agência Digital ICOMP, Avadora Digital
– Membro fundador da Associação Paranaense das
Agências Digitais (APRADi), filiada à ABRADi
• Twitter: @thiagotpc
• E‐mail: contato@thiagotpc.com