Padrões Brasil e-GovGuias p/ Codificação e Administração

Thiago Prado de Campos

Analista de TI da UTFPR Londrina

Padrões Brasil e-Gov

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.

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 2006– 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.

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 WhatYou Get)– MS FrontPage, Allaire HomeSite, Arachnophilia, HotDog, ...

• Table e Frames como soluções para tudo!

• Linguagens Perl e ASP para servidor

Era Pré 2002

Era Pré 2002

Era Pré 2002

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

De 2002 a 2006

De 2002 a 2006

Era pós 2006 aos dias atuais

• Profissionais de Tecnologia de Análise e Desenvolvimento de Sistemas, Tecnologia em Sistemas para Internet, DesignGrá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

Era pós 2006 aos dias atuais

Era pós 2006 aos dias atuais

Era pós 2006 aos dias atuais

Era pós 2006 aos dias atuais

http://www.fredcavazza.net/2010/12/14/social-media-landscape-2011/

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;

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;

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;

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

Diretrizes da Cartilha de Codificação

1. Tableless

2. CSS

3. HTML, CSS, HTTP, sitemap, RSS, microformats, etc.

4. Evite Flash, Silverlight, etc. Use EcmaScriptnão obstrutivo.

Checklist para Codificação

1. A página usa Doctype correto?

2. A página usa o character set de codificação de caracteres correto?

3. A página usa codificação válida?

4. A(s) folha(s) de estilo CSS usada pela página é (são) válida(s)?

5. Há declarações de classes ou ID's desnecessárias?

6. O código é bem estruturado?

7. Há links quebrados?

8. Qual é a performance velocidade de carregamento/tamanho da página?

9. A página utiliza URL's amigáveis?

10. As URLs funcionam sem o "www"?

Checklist para Codificação

11. Há erros de javascript?12. A página funciona com o javascript desabilitado?13. O conteúdo é acessível com as folhas de estilo desabilitadas?14. O sítio usa CSS para todos os aspectos da apresentação?15. As imagens de apresentação estão incluídas nas CSS?16. Há quebra do desenho quando o usuário aumenta o tamanho da

fonte?17. O contraste das cores da página é suficiente?18. A página é consistente em navegadores texto?19. O conteúdo é legível quando impresso? Não há desperdício de

papel ou tinta?20. A página é bem visualizada em dispositivos portáteis?21. A página é bem visualizada em diferentes resoluções de

navegador e tela?

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

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.

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;

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

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.

Como baixar e participar?

• http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov

– http://bit.ly/egovbr

O que ainda falta avançar? Desafios

• 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

O que ainda falta avançar? Desafios

• 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...

Obrigado!

• Thiago Prado de Campos

– Analista de TI na UTFPR Londrina

– Coord. e Professor da Especialização em Desenvolvimento Web da UTFPR Londrinahttp://bit.ly/espweb

• Twitter: @thiagotpc

• E-mail: contato@thiagotpc.com