Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios
-
Upload
govbr -
Category
Technology
-
view
595 -
download
0
description
Transcript of Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios
![Page 1: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/1.jpg)
Padrões Brasil e-GovGuias p/ Codificação e Administração
Thiago Prado de Campos
Analista de TI da UTFPR Londrina
![Page 2: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/2.jpg)
Padrões Brasil e-Gov
![Page 3: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/3.jpg)
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.
![Page 4: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/4.jpg)
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.
![Page 5: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/5.jpg)
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
![Page 6: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/6.jpg)
Era Pré 2002
![Page 7: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/7.jpg)
Era Pré 2002
![Page 8: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/8.jpg)
Era Pré 2002
![Page 9: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/9.jpg)
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
![Page 10: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/10.jpg)
De 2002 a 2006
![Page 11: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/11.jpg)
De 2002 a 2006
![Page 12: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/12.jpg)
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
![Page 13: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/13.jpg)
Era pós 2006 aos dias atuais
![Page 14: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/14.jpg)
Era pós 2006 aos dias atuais
![Page 15: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/15.jpg)
Era pós 2006 aos dias atuais
![Page 16: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/16.jpg)
Era pós 2006 aos dias atuais
http://www.fredcavazza.net/2010/12/14/social-media-landscape-2011/
![Page 17: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/17.jpg)
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;
![Page 18: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/18.jpg)
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;
![Page 19: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/19.jpg)
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;
![Page 20: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/20.jpg)
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
![Page 21: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/21.jpg)
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.
![Page 22: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/22.jpg)
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"?
![Page 23: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/23.jpg)
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?
![Page 24: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/24.jpg)
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
![Page 25: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/25.jpg)
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.
![Page 26: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/26.jpg)
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;
![Page 27: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/27.jpg)
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
![Page 28: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/28.jpg)
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.
![Page 29: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/29.jpg)
Como baixar e participar?
• http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
– http://bit.ly/egovbr
![Page 30: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/30.jpg)
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
![Page 31: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/31.jpg)
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...
![Page 32: Padrões em Governo Eletrônico - Cartilha de Codificação e Guia de Administração de Sítios](https://reader034.fdocument.pub/reader034/viewer/2022051610/54965722ac7959042e8b5099/html5/thumbnails/32.jpg)
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: [email protected]