A narradora descreve como a vida da família mudou com o nascimento da sua irmã Rosa há três meses. Ela sente que agora toda a atenção é dada à Rosa e não compreende porque os pais queriam outro filho quando ela própria dava trabalho suficiente. A avó atribui o nascimento da Rosa aos astronautas.
Ficha trabalho: O adjetivo - casos particulares do superlativo e do comparativoBecre Forte da Casa
Este documento fornece informações sobre a flexão de graus dos adjetivos em português, incluindo o superlativo absoluto analítico e sintético e o comparativo de superioridade e inferioridade. Apresenta exemplos de formação do superlativo e exceções à regra geral, além de exercícios para treinar o uso correto dos graus do adjetivo.
O documento define o que é um mineral, descrevendo-o como uma substância sólida, homogénea, cristalina e inorgânica formada por processos naturais. Em seguida, discute as propriedades físicas e ópticas usadas para identificar diferentes minerais, como cor, risca, brilho, clivagem, dureza e reação a ácidos.
O documento explica os conceitos de sujeito, predicado, complemento direto e complemento indireto na estrutura da frase simples. O sujeito e o predicado são os elementos essenciais da oração. O complemento direto designa o ser ou objeto sobre o qual recai a ação do verbo, enquanto o complemento indireto indica o destinatário da ação, normalmente acompanhado por uma preposição.
O documento fornece instruções para escrever um resumo sobre o filme "Diamante de Sangue". Os alunos devem discutir as ideias principais do filme, identificar e caracterizar o país retratado, e explicar os principais obstáculos ao desenvolvimento enfrentados, como a exploração de recursos naturais e conflitos armados.
O documento discute os diferentes tipos de advérbios em português, incluindo suas funções sintáticas e subclasses. Explica que os advérbios modificam verbos, adjetivos e outras frases e podem expressar tempo, lugar, modo, quantidade, negação, afirmação e outros significados. Também discute locuções adverbiais e a variação de graus em certos advérbios.
Este documento fornece instruções em 6 etapas para elaborar uma biografia: 1) Escolher o biografado; 2) Localizar fontes de informação; 3) Recolher informação sobre o biografado; 4) Registar e organizar a informação; 5) Apresentar a biografia; 6) Avaliar o trabalho. O objetivo é produzir uma narrativa da vida de alguém, incluindo detalhes como data de nascimento, realizações e influência.
1) Zezé é o protagonista pobre de 5 anos que tem uma conexão especial com seu pé de laranja lima, que o ouve e dá conselhos.
2) A família de Zezé enfrenta dificuldades financeiras e os irmãos mais velhos se envolvem em problemas enquanto a mãe trabalha duro.
3) Dois vizinhos bondosos, o Sr. Manuel Valadares e o Tio Edmundo, oferecem apoio e amizade para Zezé durante esse período difícil.
A narradora descreve como a vida da família mudou com o nascimento da sua irmã Rosa há três meses. Ela sente que agora toda a atenção é dada à Rosa e não compreende porque os pais queriam outro filho quando ela própria dava trabalho suficiente. A avó atribui o nascimento da Rosa aos astronautas.
Ficha trabalho: O adjetivo - casos particulares do superlativo e do comparativoBecre Forte da Casa
Este documento fornece informações sobre a flexão de graus dos adjetivos em português, incluindo o superlativo absoluto analítico e sintético e o comparativo de superioridade e inferioridade. Apresenta exemplos de formação do superlativo e exceções à regra geral, além de exercícios para treinar o uso correto dos graus do adjetivo.
O documento define o que é um mineral, descrevendo-o como uma substância sólida, homogénea, cristalina e inorgânica formada por processos naturais. Em seguida, discute as propriedades físicas e ópticas usadas para identificar diferentes minerais, como cor, risca, brilho, clivagem, dureza e reação a ácidos.
O documento explica os conceitos de sujeito, predicado, complemento direto e complemento indireto na estrutura da frase simples. O sujeito e o predicado são os elementos essenciais da oração. O complemento direto designa o ser ou objeto sobre o qual recai a ação do verbo, enquanto o complemento indireto indica o destinatário da ação, normalmente acompanhado por uma preposição.
O documento fornece instruções para escrever um resumo sobre o filme "Diamante de Sangue". Os alunos devem discutir as ideias principais do filme, identificar e caracterizar o país retratado, e explicar os principais obstáculos ao desenvolvimento enfrentados, como a exploração de recursos naturais e conflitos armados.
O documento discute os diferentes tipos de advérbios em português, incluindo suas funções sintáticas e subclasses. Explica que os advérbios modificam verbos, adjetivos e outras frases e podem expressar tempo, lugar, modo, quantidade, negação, afirmação e outros significados. Também discute locuções adverbiais e a variação de graus em certos advérbios.
Este documento fornece instruções em 6 etapas para elaborar uma biografia: 1) Escolher o biografado; 2) Localizar fontes de informação; 3) Recolher informação sobre o biografado; 4) Registar e organizar a informação; 5) Apresentar a biografia; 6) Avaliar o trabalho. O objetivo é produzir uma narrativa da vida de alguém, incluindo detalhes como data de nascimento, realizações e influência.
1) Zezé é o protagonista pobre de 5 anos que tem uma conexão especial com seu pé de laranja lima, que o ouve e dá conselhos.
2) A família de Zezé enfrenta dificuldades financeiras e os irmãos mais velhos se envolvem em problemas enquanto a mãe trabalha duro.
3) Dois vizinhos bondosos, o Sr. Manuel Valadares e o Tio Edmundo, oferecem apoio e amizade para Zezé durante esse período difícil.
Este documento descreve como os vulcões são formados e como funcionam, incluindo a constituição de um vulcão típico, a distribuição de vulcões no mundo, exemplos de erupções vulcânicas, os materiais libertados durante uma erupção e como as erupções podem ser previstas.
O documento descreve os elementos essenciais de uma narrativa, incluindo o narrador, personagens, ação, espaço e tempo. Ele também explica a estrutura típica de uma narrativa com uma situação inicial, desenvolvimento com eventos e uma conclusão que resolve o problema central.
O documento discute as conjunções e locuções conjuncionais, dividindo-as em coordenativas e subordinativas. As coordenativas ligam frases independentes de forma copulativa, adversativa, disjuntiva ou conclusiva. As subordinativas introduzem frases dependentes de forma temporal, causal, condicional, final, integrante, consecutiva ou concessiva.
O documento descreve a evolução do conhecimento sobre o Sistema Solar, desde as observações na Antiguidade até as teorias modernas. Começa com os gregos identificando os planetas e continua com Copérnico propondo o modelo heliocêntrico, Galileu observando com telescópio, Kepler descobrindo as leis dos movimentos planetários e Newton explicando a gravitação. Também discute a hipótese nebular sobre a formação do Sistema Solar.
O documento discute os processos de diferenciação celular, ciclo celular, apoptose, regeneração e metáplases. Apresenta experiências de Steward e Biggs que demonstraram que o DNA de uma célula diferenciada contém toda a informação genética de um organismo. Fatores ambientes podem alterar a expressão génica e levar a mudanças no tipo e função celular.
Este documento fornece informações sobre processos geológicos como a erosão, formação de rochas sedimentares e metamórficas, e ciclo das rochas. Contém perguntas sobre diagramas ilustrando estas transformações geológicas.
O documento descreve os quatro grupos principais de rochas que podem ser diferenciados pela granulação e estrutura, e fornece detalhes sobre como identificar rochas sedimentares, ígneas e metamórficas.
1) The document is an English worksheet for 7th year students containing a list of common English verbs in their infinitive, simple past, and past participle forms.
2) The verbs are organized in columns showing their infinitive, simple past, and past participle forms to help students learn conjugations.
3) There are over 50 verbs included such as "be, beat, become, begun" in their three forms.
Um servidor do Instituto Federal do Ceará campus de Acaraú solicita à coordenação de pesquisa e inovação auxílio financeiro para participar de um evento importante no qual apresentará trabalhos científicos representando o campus. O servidor pede um número de diárias e justifica a importância do evento e sua participação.
O documento discute a história da Terra e trilobites. Inclui informações sobre as ordens de trilobites, sua distribuição no tempo e espaço, e como são bons fósseis de idade. Também mostra como níveis de água, temperatura e composição atmosférica variaram ao longo do tempo geológico.
Este documento discute a diversidade de paisagens geológicas em Portugal, incluindo exemplos de paisagens magmáticas, sedimentares e metamórficas. Ele explica as características dessas paisagens, como blocos de granito em paisagens graníticas e colunas hexagonais em paisagens basálticas. O documento também menciona identificar o tipo de paisagem geológica na área da escola.
(1) O documento descreve uma carta formal denunciando uma situação de desrespeito dos Direitos Humanos que o autor presenciou. (2) A carta é endereçada ao Presidente da Amnistia Internacional de Lisboa para pedir ajuda para uma família que foi despejada e ficou sem emprego ou moradia. (3) O autor oferece-se para servir de intermediário e ajudar a resolver o problema desta família.
O documento discute o vulcanismo, definindo-o como o conjunto de processos que conduzem à saída de material magmático à superfície terrestre. Explica que os vulcões se localizam principalmente nos limites das placas tectônicas e que existem dois tipos principais de vulcanismo - efusivo e explosivo - determinados pela viscosidade da lava e teor de gases. Também destaca alguns benefícios do vulcanismo para os humanos, como a fertilidade dos solos.
O documento é uma justificação de faltas de um aluno assinada pelo encarregado de educação. Ele fornece detalhes sobre o nome do aluno, a turma, as datas e horas das faltas, e o motivo das faltas. O professor titular de turma deve preencher se aceita ou não a justificação e pode adicionar observações.
Bruno da Cruz Maciel nomeou Maria da Cruz Maciel como sua procuradora para representá-lo, receber certificados e realizar quaisquer procedimentos em seu nome. A procuração foi assinada em 29 de agosto de 2015 em Lajeado Novo, Maranhão.
O documento é um teste de português para alunos do 8o ano que aborda vários tópicos como compreensão oral, leitura, gramática e produção escrita. A parte de leitura consiste numa carta escrita por Anne Frank onde relata as terríveis condições de vida dos judeus na Holanda durante a Segunda Guerra Mundial, incluindo a deportação em massa para campos de concentração.
O documento discute vários tipos de herança genética, incluindo dominância, recessividade, codominância, genes letais e ligação aos cromossomos sexuais. A herança genética pode ser mais complexa do que descrito por Mendel, com interações entre genes e exceções à segunda lei de Mendel devido a crossing over durante a meiose.
Sandra de Fátima Nunes Sousa pede ao diretor da Escola Profissional de Nordeste o certificado de habilitações do Curso de Técnico de Secretariado, fornecendo seus dados pessoais e informando que está matriculada no curso com o número 1389.
FT1 - Estrutura Interna da Terra - RevisõesGabriela Bruno
Litosfera, manto e núcleo são as três principais camadas da Terra. A litosfera é composta pela crosta continental espessa e basáltica crosta oceânica. O manto fica entre a crosta e o núcleo. O núcleo é dividido em núcleo externo líquido e núcleo interno sólido composto por ferro e níquel. A vida existe apenas na crosta terrestre.
Este documento fornece orientações sobre boas práticas de redação para websites governamentais. Ele discute pontos como persuasão, objetividade, relevância e credibilidade na redação para a web. Também fornece dicas sobre como estruturar títulos, textos e links de acordo com o nível de detalhamento da informação.
Este documento descreve como os vulcões são formados e como funcionam, incluindo a constituição de um vulcão típico, a distribuição de vulcões no mundo, exemplos de erupções vulcânicas, os materiais libertados durante uma erupção e como as erupções podem ser previstas.
O documento descreve os elementos essenciais de uma narrativa, incluindo o narrador, personagens, ação, espaço e tempo. Ele também explica a estrutura típica de uma narrativa com uma situação inicial, desenvolvimento com eventos e uma conclusão que resolve o problema central.
O documento discute as conjunções e locuções conjuncionais, dividindo-as em coordenativas e subordinativas. As coordenativas ligam frases independentes de forma copulativa, adversativa, disjuntiva ou conclusiva. As subordinativas introduzem frases dependentes de forma temporal, causal, condicional, final, integrante, consecutiva ou concessiva.
O documento descreve a evolução do conhecimento sobre o Sistema Solar, desde as observações na Antiguidade até as teorias modernas. Começa com os gregos identificando os planetas e continua com Copérnico propondo o modelo heliocêntrico, Galileu observando com telescópio, Kepler descobrindo as leis dos movimentos planetários e Newton explicando a gravitação. Também discute a hipótese nebular sobre a formação do Sistema Solar.
O documento discute os processos de diferenciação celular, ciclo celular, apoptose, regeneração e metáplases. Apresenta experiências de Steward e Biggs que demonstraram que o DNA de uma célula diferenciada contém toda a informação genética de um organismo. Fatores ambientes podem alterar a expressão génica e levar a mudanças no tipo e função celular.
Este documento fornece informações sobre processos geológicos como a erosão, formação de rochas sedimentares e metamórficas, e ciclo das rochas. Contém perguntas sobre diagramas ilustrando estas transformações geológicas.
O documento descreve os quatro grupos principais de rochas que podem ser diferenciados pela granulação e estrutura, e fornece detalhes sobre como identificar rochas sedimentares, ígneas e metamórficas.
1) The document is an English worksheet for 7th year students containing a list of common English verbs in their infinitive, simple past, and past participle forms.
2) The verbs are organized in columns showing their infinitive, simple past, and past participle forms to help students learn conjugations.
3) There are over 50 verbs included such as "be, beat, become, begun" in their three forms.
Um servidor do Instituto Federal do Ceará campus de Acaraú solicita à coordenação de pesquisa e inovação auxílio financeiro para participar de um evento importante no qual apresentará trabalhos científicos representando o campus. O servidor pede um número de diárias e justifica a importância do evento e sua participação.
O documento discute a história da Terra e trilobites. Inclui informações sobre as ordens de trilobites, sua distribuição no tempo e espaço, e como são bons fósseis de idade. Também mostra como níveis de água, temperatura e composição atmosférica variaram ao longo do tempo geológico.
Este documento discute a diversidade de paisagens geológicas em Portugal, incluindo exemplos de paisagens magmáticas, sedimentares e metamórficas. Ele explica as características dessas paisagens, como blocos de granito em paisagens graníticas e colunas hexagonais em paisagens basálticas. O documento também menciona identificar o tipo de paisagem geológica na área da escola.
(1) O documento descreve uma carta formal denunciando uma situação de desrespeito dos Direitos Humanos que o autor presenciou. (2) A carta é endereçada ao Presidente da Amnistia Internacional de Lisboa para pedir ajuda para uma família que foi despejada e ficou sem emprego ou moradia. (3) O autor oferece-se para servir de intermediário e ajudar a resolver o problema desta família.
O documento discute o vulcanismo, definindo-o como o conjunto de processos que conduzem à saída de material magmático à superfície terrestre. Explica que os vulcões se localizam principalmente nos limites das placas tectônicas e que existem dois tipos principais de vulcanismo - efusivo e explosivo - determinados pela viscosidade da lava e teor de gases. Também destaca alguns benefícios do vulcanismo para os humanos, como a fertilidade dos solos.
O documento é uma justificação de faltas de um aluno assinada pelo encarregado de educação. Ele fornece detalhes sobre o nome do aluno, a turma, as datas e horas das faltas, e o motivo das faltas. O professor titular de turma deve preencher se aceita ou não a justificação e pode adicionar observações.
Bruno da Cruz Maciel nomeou Maria da Cruz Maciel como sua procuradora para representá-lo, receber certificados e realizar quaisquer procedimentos em seu nome. A procuração foi assinada em 29 de agosto de 2015 em Lajeado Novo, Maranhão.
O documento é um teste de português para alunos do 8o ano que aborda vários tópicos como compreensão oral, leitura, gramática e produção escrita. A parte de leitura consiste numa carta escrita por Anne Frank onde relata as terríveis condições de vida dos judeus na Holanda durante a Segunda Guerra Mundial, incluindo a deportação em massa para campos de concentração.
O documento discute vários tipos de herança genética, incluindo dominância, recessividade, codominância, genes letais e ligação aos cromossomos sexuais. A herança genética pode ser mais complexa do que descrito por Mendel, com interações entre genes e exceções à segunda lei de Mendel devido a crossing over durante a meiose.
Sandra de Fátima Nunes Sousa pede ao diretor da Escola Profissional de Nordeste o certificado de habilitações do Curso de Técnico de Secretariado, fornecendo seus dados pessoais e informando que está matriculada no curso com o número 1389.
FT1 - Estrutura Interna da Terra - RevisõesGabriela Bruno
Litosfera, manto e núcleo são as três principais camadas da Terra. A litosfera é composta pela crosta continental espessa e basáltica crosta oceânica. O manto fica entre a crosta e o núcleo. O núcleo é dividido em núcleo externo líquido e núcleo interno sólido composto por ferro e níquel. A vida existe apenas na crosta terrestre.
Este documento fornece orientações sobre boas práticas de redação para websites governamentais. Ele discute pontos como persuasão, objetividade, relevância e credibilidade na redação para a web. Também fornece dicas sobre como estruturar títulos, textos e links de acordo com o nível de detalhamento da informação.
Este documento fornece diretrizes para a redação de conteúdo para sites governamentais. Ele discute princípios como persuasão, objetividade, relevância e credibilidade na redação para a web. Também fornece orientações sobre como estruturar títulos, textos e links de acordo com o nível de detalhamento da informação.
Este documento apresenta diretrizes de usabilidade para o desenvolvimento de sítios de governo eletrônico no Brasil. Ele descreve sete diretrizes principais de usabilidade, incluindo contexto e navegação, carga de informação, autonomia, erros, design, redação e consistência. O documento também fornece orientações sobre avaliação de usabilidade por meio de métodos de investigação, inspeção e testes com usuários.
Cartilha de redação web padrões brasil e-govLuara Schamó
Este documento fornece diretrizes sobre redação para sites governamentais. Ele discute princípios como persuasão, objetividade e relevância na produção de conteúdo online, e fornece orientações sobre títulos, textos e links. Também aborda o uso de imagens, áudio e vídeo, além de seções comuns em sites governamentais.
Este documento apresenta diretrizes sobre usabilidade em sites do governo eletrônico brasileiro, com o objetivo de aprimorar a comunicação e prestação de serviços digitais aos cidadãos. A cartilha discute a importância da usabilidade, fornece recomendações de projeto e avaliação, e lista recursos adicionais sobre o tema.
Este documento fornece diretrizes para a redação de conteúdo para sites governamentais. Ele discute princípios como objetividade, relevância e credibilidade, e fornece orientações sobre títulos, textos e links. Além disso, aborda questões como imagens, áudio, vídeo e seções comuns em sites governamentais.
Este documento fornece diretrizes sobre usabilidade para sites do governo eletrônico brasileiro. Ele discute a importância da usabilidade, diretrizes de design e avaliação, e fornece recursos adicionais. O objetivo é tornar os sites do governo fáceis de usar para cidadãos de todas as habilidades.
Este documento fornece informações sobre três programas para sincronização de dados entre computadores e dispositivos móveis: KMobile, JPilot e KPilot. Ele descreve como instalar e configurar esses programas, suas principais características e como utilizá-los. O documento também inclui um plano de ensino sobre esses tópicos.
Este documento apresenta o sumário de um livro sobre o panorama da interoperabilidade no Brasil. O livro está dividido em duas seções principais: Caminhos para interoperabilidade e Experiências de interoperabilidade. A seção Caminhos para interoperabilidade discute elementos e princípios para a implementação efetiva de ações de interoperabilidade no governo brasileiro, incluindo a construção da arquitetura e-PING e suas estratégias de desenvolvimento.
Livro: Panorama da interoperabilidade no brasilGovBR
Este documento apresenta o sumário de um livro sobre o panorama da interoperabilidade no Brasil. O livro está dividido em duas seções principais: Caminhos para interoperabilidade e Experiências de interoperabilidade. A seção Caminhos para interoperabilidade discute elementos e princípios para a implementação efetiva de ações de interoperabilidade no governo brasileiro, incluindo a construção da arquitetura e-PING e suas estratégias de desenvolvimento.
O documento descreve um projeto para implementar um canal de comunicação entre as subprefeituras e os cidadãos utilizando ferramentas da Web 2.0. O projeto visa estimular o controle social da administração pública municipal e melhorar o atendimento às necessidades locais, permitindo que os cidadãos forneçam sugestões e recebam informações. O documento analisa o contexto atual da internet e das mídias sociais no Brasil e justifica a necessidade do projeto. Ele também apresenta uma análise SWOT e descreve os problemas atuais e
Este documento fornece informações sobre o software Jabber, incluindo sua história, o que é, e como configurar contas Jabber nos clientes GAIM e Kopete. Ele também discute o objetivo, público-alvo, pré-requisitos, descrição, metodologia, cronograma, programa, avaliação e bibliografia de um plano de ensino sobre o Jabber.
Este documento fornece informações sobre o Dovecot, um servidor de email open source. Ele discute a instalação e configuração do Dovecot, incluindo autenticação, SSL e configuração de usuários. Também fornece instruções sobre como configurar corretamente o Dovecot para fornecer serviços de email seguros.
Este documento apresenta um plano de ensino para o uso do software Nvu, dividido em três lições. A primeira lição aborda a instalação e introdução ao Nvu, além de formatação de texto e listas. A segunda lição trata de imagens, tabelas, links e formulários. A terceira lição fala sobre camadas, templates, estilos e a publicação de sites com Nvu. O documento também fornece informações sobre o CDTC e orientações para alunos de cursos a distância.
1. O documento descreve as convenções de formatação e símbolos usados em um material de treinamento.
2. É apresentada uma lista de abreviações e siglas comumente usadas.
3. O documento fornece as informações essenciais sobre como o conteúdo será apresentado visualmente para os usuários.
Este documento fornece informações sobre gerenciamento de projetos, incluindo definições, processos, ferramentas e áreas de conhecimento. Aborda tópicos como planejamento, execução e controle de projetos, além de apresentar a estrutura de trabalho de projetos e diagramas de gerenciamento.
Este documento apresenta um curso sobre o software livre Inkscape. Ele inclui informações sobre o objetivo, público-alvo, pré-requisitos, descrição, metodologia, cronograma e avaliação do curso. O curso é dividido em 5 lições que ensinam sobre instalação e ferramentas básicas, seleções e preenchimento, colagem e desenho à mão livre, operações booleanas e criação de texto no Inkscape.
Este documento fornece informações sobre o Drupal, um sistema de gerenciamento de conteúdo open source. Ele discute o que é Drupal, requisitos e instalação, configurações, conceitos básicos e como começar a administrar um site com Drupal. O documento também inclui uma seção sobre gerenciamento de usuários e conteúdo.
"A Tecnologia em prol da acessibilidade: construindo uma WEB acessível a todos"GovBR
O documento discute a importância da acessibilidade na web para pessoas com deficiência. Apresenta a Convenção sobre os Direitos das Pessoas com Deficiência que estabelece um novo paradigma vendo a pessoa com deficiência e não a deficiência. Também contrasta o conceito de "especial" com o de "acessível" mostrando que este último é mais inclusivo e beneficia a todos.
A Secretaria Nacional de Promoção dos Direitos das Pessoas com Deficiência, Coordenação-Geral de Acessibilidade traz nesta apresentação Conceitos sobre
Deficiência, Acessibilidade e Desenho Universal, Dados do Censo 2010, Tendências - envelhecimento da população e Boas práticas de acessibilidade e mitos sobre a acessibilidade.
“Guia Turismo Acessível” um País onde Todos podem Viajar!GovBR
O sítio “Guia Turismo Acessível” é um guia online colaborativo. Os turistas – pessoas com deficiência ou não, podem consultar, cadastrar e avaliar estabelecimentos e atrações turísticas quanto ao seu nível de acessibilidade.
Destaques e Melhorias da Nova Versão do eMAG GovBR
O documento discute a nova versão 3.1 do eMAG, que fornece recomendações para implementar acessibilidade digital no governo. A versão 3.1 reestrutura as recomendações em 6 sessões, reclassifica algumas recomendações e melhora os contextos dos conteúdos com exemplos em HTML5. O documento também menciona iniciativas como o VLibras para promover a acessibilidade.
O Governo Eletrônico Brasileiro em PerspectivaGovBR
O documento discute a perspectiva do governo eletrônico brasileiro, abordando sua história, diretrizes, desafios de participação social, integração e interoperabilidade, além da importância de avançar na inclusão digital e transparência para melhor servir aos cidadãos.
Modelo Brasileiro de Acessibilidade em Governo EletrônicoGovBR
O documento discute a importância da acessibilidade nos sites governamentais, destacando pesquisas que mostram que a maioria dos cidadãos espera encontrar explicações sobre serviços e direitos em sites do governo, mas na prática enfrentam dificuldades como não achar serviços ou não receber retorno. Apenas 6,96% dos sites governamentais eram acessíveis em 2011. O documento também apresenta padrões e recomendações para tornar conteúdos digitais do governo acessíveis.
O documento discute o modelo brasileiro de acessibilidade em governo eletrônico, definindo acessibilidade na web e seus benefícios. Ele também descreve como desenvolver sites acessíveis através de boas práticas de codificação, como uso correto de cabeçalhos, formulários e tabelas, além de fornecer conteúdo alternativo e contraste adequado. Por fim, apresenta ferramentas para avaliar a acessibilidade de sites governamentais.
Aplicações de Governo Eletrônico - Tecnologias Assistivas com Software LivreGovBR
O documento discute as tecnologias assistivas e seu mercado no Brasil. Apresenta estatísticas sobre a população que se beneficiaria da acessibilidade digital, como pessoas com deficiência, idosos e analfabetos. Também aborda os desafios do mercado de tecnologias para surdos, como a falta de soluções livres e acessíveis para a Língua Brasileira de Sinais.
O documento resume as atividades da WWW2013, incluindo workshops, apresentações e palestrantes sobre análise de conteúdo de notícias, mineração de dados em fluxos, visualização de dados e desafios relacionados à web aberta. Mais de 1000 pessoas de 40 países participaram da conferência de uma semana com atividades simultâneas em até 13 salas.
O documento resume os principais pontos discutidos na conferência WWW2013 sobre acessibilidade na web. Aborda os desafios de acessibilidade em diferentes dispositivos móveis, estratégias para simplificar conteúdo para pessoas com dislexia e a importância da avaliação humana em complemento às ferramentas automatizadas.
O documento descreve o projeto de integração de protocolos do governo federal brasileiro, coordenado pelo Ministério do Planejamento. O objetivo é consolidar uma base de dados integrada com informações de protocolo de órgãos governamentais, para disponibilizar serviços públicos eletrônicos e melhorar a eficiência do governo.
O documento descreve como os municípios brasileiros podem melhorar a gestão pública por meio do uso de soluções de tecnologia da informação disponíveis no Portal do Software Público Brasileiro. O portal oferece acesso gratuito a mais de 50 aplicativos que podem ser baixados, copiados e adaptados às necessidades de cada prefeitura, reduzindo custos. Além disso, o portal permite o compartilhamento de experiências entre prefeituras por meio de fóruns, chats e casos de sucesso implementados em diferentes
Siconv - Sistema de Gestão de Convênios e Contratos de RepasseGovBR
O documento descreve o Sistema de Informações sobre Convênios e Contratos de Repasse (SICONV) do Ministério do Planejamento. O SICONV centraliza a gestão de convênios e contratos de repasse federais, permitindo que municípios captem recursos federais de forma eletrônica e padronizada. O documento detalha os programas disponíveis, fluxos, legislação e facilidades do SICONV.
O documento discute o novo paradigma das compras governamentais no Brasil, colocando maior ênfase no uso do poder de compra do Estado para promover o desenvolvimento sustentável. Apresenta a agenda do encontro, que inclui compras sustentáveis e a Comissão Interministerial de Sustentabilidade na Administração Pública. Também aborda margens de preferência para micro e pequenas empresas e a história da sustentabilidade em acordos internacionais assinados pelo Brasil.
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...Faga1939
Este artigo tem por objetivo apresentar como ocorreu a evolução do consumo e da produção de energia desde a pré-história até os tempos atuais, bem como propor o futuro da energia requerido para o mundo. Da pré-história até o século XVIII predominou o uso de fontes renováveis de energia como a madeira, o vento e a energia hidráulica. Do século XVIII até a era contemporânea, os combustíveis fósseis predominaram com o carvão e o petróleo, mas seu uso chegará ao fim provavelmente a partir do século XXI para evitar a mudança climática catastrófica global resultante de sua utilização ao emitir gases do efeito estufa responsáveis pelo aquecimento global. Com o fim da era dos combustíveis fósseis virá a era das fontes renováveis de energia quando prevalecerá a utilização da energia hidrelétrica, energia solar, energia eólica, energia das marés, energia das ondas, energia geotérmica, energia da biomassa e energia do hidrogênio. Não existem dúvidas de que as atividades humanas sobre a Terra provocam alterações no meio ambiente em que vivemos. Muitos destes impactos ambientais são provenientes da geração, manuseio e uso da energia com o uso de combustíveis fósseis. A principal razão para a existência desses impactos ambientais reside no fato de que o consumo mundial de energia primária proveniente de fontes não renováveis (petróleo, carvão, gás natural e nuclear) corresponde a aproximadamente 88% do total, cabendo apenas 12% às fontes renováveis. Independentemente das várias soluções que venham a ser adotadas para eliminar ou mitigar as causas do efeito estufa, a mais importante ação é, sem dúvidas, a adoção de medidas que contribuam para a eliminação ou redução do consumo de combustíveis fósseis na produção de energia, bem como para seu uso mais eficiente nos transportes, na indústria, na agropecuária e nas cidades (residências e comércio), haja vista que o uso e a produção de energia são responsáveis por 57% dos gases de estufa emitidos pela atividade humana. Neste sentido, é imprescindível a implantação de um sistema de energia sustentável no mundo. Em um sistema de energia sustentável, a matriz energética mundial só deveria contar com fontes de energia limpa e renováveis (hidroelétrica, solar, eólica, hidrogênio, geotérmica, das marés, das ondas e biomassa), não devendo contar, portanto, com o uso dos combustíveis fósseis (petróleo, carvão e gás natural).
A linguagem C# aproveita conceitos de muitas outras linguagens,
mas especialmente de C++ e Java. Sua sintaxe é relativamente fácil, o que
diminui o tempo de aprendizado. Todos os programas desenvolvidos devem
ser compilados, gerando um arquivo com a extensão DLL ou EXE. Isso torna a
execução dos programas mais rápida se comparados com as linguagens de
script (VBScript , JavaScript) que atualmente utilizamos na internet
Em um mundo cada vez mais digital, a segurança da informação tornou-se essencial para proteger dados pessoais e empresariais contra ameaças cibernéticas. Nesta apresentação, abordaremos os principais conceitos e práticas de segurança digital, incluindo o reconhecimento de ameaças comuns, como malware e phishing, e a implementação de medidas de proteção e mitigação para vazamento de senhas.
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
1. Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo Eletrônico
www.governoeletronico.gov.br
Padrões Brasil e-Gov
Cartilha de Codificação
Versão 2.1
Julho de 2010
2. Brasil. Ministério do Planejamento, Orçamento e Gestão. ecretaria
de Logística e Tecnologia da Informação
Padrões Brasil e-Gov : Cartilha de Codificação / Ministério do
Planejamento, Orçamento e Gestão, Secretaria de Logística e
Tecnologia da Informação - Brasília : MP, SLTI, 2010.
48 p.: color.
1. Informática - codificação de paginas 2. Sites da Web - Projetos.
3. Sites na Web - Desenvolvimento 4. Programação para Internet
5. Informática - Serviço Público I. Título.
CDU 004.5:35
CDD 004.678
Esta obra foi licenciada com uma Licença Creative Commons - Atribuição -
Partilha nos Mesmos Termos 3.0 Não Adaptada
http://creativecommons.org/licenses/by-sa/3.0/br/
Você tem a liberdade de:
• Compartilhar — copiar, distribuir e transmitir a obra.
• Remixar — criar obras derivadas.
Sob as seguintes condições:
• Atribuição — Você deve creditar a obra da forma especificada pelo autor ou licenciante (mas não
de maneira que sugira que estes concedem qualquer aval a você ou ao seu uso da obra).
• Compartilhamento pela mesma licença — Se você alterar, transformar ou criar em cima desta obra,
você poderá distribuir a obra resultante apenas sob a mesma licença, ou sob uma licença similar à
presente.
Ficando claro que:
• Renúncia — Qualquer das condições acima pode ser renunciada se você obtiver permissão do
titular dos direitos autorais.
• Domínio Público — Onde a obra ou qualquer de seus elementos estiver em domínio público sob o
direito aplicável, esta condição não é, de maneira alguma, afetada pela licença.
• Outros Direitos — Os seguintes direitos não são, de maneira alguma, afetados pela licença:
• Limitações e exceções aos direitos autorais ou quaisquer usos livres aplicáveis;
• Os direitos morais do autor;
• Direitos que outras pessoas podem ter sobre a obra ou sobre a utilização da obra, tais como
direitos de imagem ou privacidade.
• Aviso — Para qualquer reutilização ou distribuição, você deve deixar claro a terceiros os termos da
licença a que se encontra submetida esta obra.
Padrões Brasil e-GOV – Cartilha de Codificação 2
3. Agradecimentos
O Departamento de Governo Eletrônico agradece a:
Fabio Augusto Barbosa Gameleira
Luis Flavio Loreto da Rocha
Luiz Agner
Maysa Alves
Miriam Hitomi Simofusa
Nohab Santos Carvalho Rocha
Thiago Prado de Campos
Pela sua contribuição, via Consulta Pública, com sugestões, esclarecimentos e
correções para o presente documento.
A participação de todos foi inestimável.
DGE – Departamento de Governo Eletrônico
Padrões Brasil e-GOV – Cartilha de Codificação 3
4. Índice
Padrões Brasil e-GOV................................................................................................. 5
Objetivos desse Guia.................................................................................................. 5
Responsabilidade e manutenção................................................................................ 6
1. Introdução.................................................................................................................. 7
1.1 Diretrizes............................................................................................................... 8
2. Padrões Web.............................................................................................................. 9
2.1 Código em camadas............................................................................................ 11
2.2 HTML e XHTML.................................................................................................... 12
2.3 CSS (cascating style sheets)............................................................................... 13
3. Recomendações ...................................................................................................... 17
3.1 Recomendações gerais....................................................................................... 17
3.2 Elementos do cabeçalho..................................................................................... 21
3.3 Corpo.................................................................................................................. 24
3.4 Folhas de estilo................................................................................................... 27
3.5 Uso de scripts e cookies...................................................................................... 30
3.6 Arquivos em outros formatos e uso de plugins.................................................... 31
4. Orientações gerais sobre testes .............................................................................. 33
4.1 Validação............................................................................................................. 33
4.2 Resoluções de vídeo............................................................................................ 33
4.3 Navegadores e sistema....................................................................................... 33
4.4 Outros dispositivos.............................................................................................. 34
4.5 Teste em camadas.............................................................................................. 35
4.6 Teste de acessibilidade....................................................................................... 35
5. Problemas mais comuns........................................................................................... 37
6. Lista de verificação................................................................................................... 40
7. Lista de formatos de arquivos e plugins................................................................... 41
8. Recursos.................................................................................................................. 45
9. Leitura Complementar.............................................................................................. 48
10. Glossário............................................................................................................... 49
Padrões Brasil e-GOV – Cartilha de Codificação 4
5. Padrões Brasil e-GOV
A presente Cartilha é o resultado do Projeto Padrões Brasil e-Gov, do Programa de
Governo Eletrônico do Governo Federal (www.governoeletronico.gov.br) - que fornece
recomendações de boas práticas na área digital, com o objetivo de aprimorar a
comunicação, o fornecimento de informações e serviços prestados por meios
eletrônicos pelos órgãos do Governo Federal.
A adoção dos Padrões Brasil e-GOV traz vantagens na gestão de sítios, como a
garantia do nível de qualidade, pois possibilita a mensuração de resultados. Fornece
também requisitos para a correta contratação da equipe responsável por desenvolver
o sítio, diminui o tempo, o custo de desenvolvimento e manutenção das páginas. Além
disso, a padronização desses ambientes acelera o processo de adaptação e migração
para tecnologias mais modernas, e ainda aumenta a qualidade da comunicação com a
sociedade.
Conheça mais sobre as recomendações dos Padrões Brasil e-GOV no endereço:
www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov .
Objetivos desse Guia
O objetivo desse guia é detalhar recomendações de boas práticas em codificação, que
orientem as equipes no desenvolvimento de sítios, portais e serviços de governo
eletrônico com o propósito de torná-los identificáveis, portáveis, relevantes, acessíveis
e efetivos à população. Esse guia foi concebido para ser prático e de fácil consulta.
Não é o objetivo desse guia o detalhamento do código. Não citamos, por exemplo, a
lista de atributos considerados obsoletos pela W3C (World Wide Web Consortium). O
documento ficaria por demais extenso e perderia rapidamente sua atualidade. A
documentação produzida e mantida pela W3C é diversas vezes referenciada no guia e
deve ser consultada sempre que se considerar necessário.
A codificação constituiu-se de um conjunto de arquivos com função de conteúdo,
apresentação e comportamento. É o esqueleto, a estrutura que dá suporte aos
aspectos da página relacionados a apresentação, organização, navegação e
usabilidade.
Padrões Brasil e-GOV – Cartilha de Codificação 5
6. Esse guia, além de apresentar recomendações que sigam os padrões web
preconizados pela W3C e de boas práticas recomendadas por outros grupos,
apresenta orientações para testes e escolha de gerenciadores de conteúdo.
Responsabilidade e manutenção
A manutenção desse documento é responsabilidade do Departamento de Governo
Eletrônico - DGE. Questões sobre aspectos desse documento devem ser enviados para
padroesegov@governoeletronico.gov.br
Padrões Brasil e-GOV – Cartilha de Codificação 6
7. 1. Introdução
As Tecnologias de Informação e Comunicação (TICs) são instrumentos cada vez mais
importantes no desenvolvimento de ferramentas que melhorem a prestação de
serviços e a disponibilização de informações primordiais para os cidadãos. A adoção
dessas tecnologias permite o aumento da eficácia, da eficiência e da transparência
governamental.
A adoção de meios eletrônicos para a prestação dos serviços governamentais exige
que os sítios e portais desenvolvidos e mantidos pela administração pública sejam
fáceis de usar, relevantes e efetivos. Somente por meio da eficiência é possível
aumentar a satisfação dos usuários de serviços eletrônicos e conquistar,
gradativamente, uma parcela cada vez maior da população.
É, portanto, responsabilidade da administração pública oferecer ao cidadão,
a melhor experiência possível de acesso ao governo eletrônico, respeitando
inclusive, as particularidades da população atingida.
Entre os vários aspectos relacionados ao uso da Internet para a prestação de serviços
por meios eletrônicos, destaca-se a questão da codificação de páginas dos sítios e
portais que deve seguir os padrões Web e de boas práticas de implementação, para
garantir seu desenvolvimento estruturado e evolutivo.
Sítios e portais que seguem as melhores recomendações de codificação são mais ágeis
e versáteis, além de oferecer facilidades para o transporte das mesmas soluções para
outros meios eletrônicos como aparelhos celulares, computadores de mão e outros. A
solução dos problemas mais comuns de formatação gera ganhos imediatos e, em
geral, custa muito pouco para resolver.
É para orientar e facilitar o desenvolvimento de sítios e portais governamentais
seguindo as melhores práticas da Web que o Departamento de Governo Eletrônico
(DGE) lança esse guia.Trata-se de uma primeira versão que reflete um acúmulo de
conhecimento e experiências difundidas internacionalmente até o momento. Assim,
esse documento se oferece, sobretudo como uma referência para o debate e
contribuições que deverão ser incorporadas às próximas versões.
Padrões Brasil e-GOV – Cartilha de Codificação 7
8. 1.1 Diretrizes
As orientações desse guia seguem quatro diretrizes:
Páginas leves
As páginas devem ter preferencialmente até 50 kb, somados código, conteúdo
e imagens. Recomenda-se que as páginas não ultrapassem 70kb de tamanho.
Separação da forma do conteúdo
Separe a estrutura e o conteúdo da página de sua codificação e visual. O
posicionamento, a forma e a cor devem ser criados a partir de folhas de estilo
(CSS).
Páginas em conformidade com os padrões Web
Padrões Web são especificações abertas que prevêem a acessibilidade desses
documentos ao maior grupo de indivíduos possível.
Páginas independentes de navegador e plataforma
A utilização de tags ou comandos proprietários podem comprometer, prejudicar
e até impedir a visualização e o perfeito funcionamento da página em outros
navegadores ou sistemas operacionais.
Padrões Brasil e-GOV – Cartilha de Codificação 8
9. 2. Padrões Web
Padrões Web são especificações abertas estabelecidas pelo W3C que são utilizadas
para criar e interpretar o conteúdo web. Essas tecnologias são desenvolvidas prevendo
a acessibilidade desses documentos ao maior grupo de indivíduos possível.
Quando um documento segue os padrões web, significa que:
É escrito numa linguagem de marcação válida, mais comumente em HTML ou
XHTML;
Utiliza folhas de estilo para a apresentação;
Está estruturado de forma semântica;
Funciona em qualquer navegador ou dispositivo que acesse a rede.
Estruturar um documento de forma semântica significa utilizar os elementos da
linguagem de acordo com a função para as quais foram criados. Utilizando uma
marcação semântica o documento se torna compreensível para qualquer navegador
ou parser, incluindo aqueles baseados em texto.
Alguns desenvolvedores, principalmente os preocupados com a parte visual da página,
pensam que ‘funcionar em qualquer navegador’ quer dizer que ‘tem o mesmo visual
em qualquer navegador’ o que é uma forma errônea de se pensar o desenvolvimento
de páginas e aplicativos para Web.
Documentos web são visualizados a partir de uma vasta gama de navegadores,
versões, resoluções de tela e cor. Usuários podem modificar as características dos
navegadores de acordo com suas necessidades e preferências. Esta é uma
característica inerente do conteúdo web. Não há necessidade que o conteúdo tenha o
mesmo visual em todas as plataformas, o que é absolutamente necessário é que o
conteúdo, a aplicação seja acessível, fácil de ler e que funcione no maior
número de plataformas e dispositivos.
Desenvolver e evoluir páginas, sítios e portais aplicando os padrões web requer um
esforço inicial para o abandono de velhas práticas, mas também oferece uma série de
benefícios tais como:
Padrões Brasil e-GOV – Cartilha de Codificação 9
10. Simplifica o desenvolvimento e a manutenção: Os ciclos de
desenvolvimento e manutenção são mais curtos, pois o código é menor - sem
tabelas de estrutura e aninhadas - e não possui elementos redundantes e
desnecessários.
Independência de “legado”: Utilizar e conhecer os padrões permite que os
membros da equipe compreendam o código independente de quem o tenha
escrito.
Estabelece métricas consistentes: O desenvolvimento seguindo os padrões
tem parâmetros consistentes de qualidade de código.
Compatibilidade com navegadores futuros e outros dispositivos:
Utilizar os padrões reduz o risco das páginas não serem funcionais em outros
dispositivos ou navegadores futuros.
Carregamento e apresentação de página mais ágil: A utilização de
padrões incorre em menos código escrito. Os navegadores mais modernos
conseguem montar de forma mais ágil, uma página que siga os padrões.
Melhora na acessibilidade: Separar a estrutura da apresentação auxilia a
interpretação do conteúdo por leitores de tela e dispositivos alternativos de
navegação.
Melhor posicionamento nos resultados de busca: Assim como a
separação do conteúdo da apresentação facilita a acessibilidade também o
torna mais representativo aos motores de busca.
Facilidade de evoluir e adaptar: A adoção de padrões facilita a transposição
para outras mídias, como a impressão das páginas e outros dispositivos como
PDAs e celulares apenas utilizando outra folha de estilo.
Diminuição nos custos de hospedagem, manutenção e banda: O
redesenho de páginas seguindo os padrões web tem um impacto no
tamanho/peso dos arquivos. Também há uma diminuição no tempo de
carregamento e no número de arquivos requisitados, reduzindo os custos com
hospedagem e banda.
Padrões Brasil e-GOV – Cartilha de Codificação 10
11. 2.1 Código em camadas
Desenvolver seguindo os padrões web significa utilizar as linguagens seguindo os
objetivos para a quais elas foram desenvolvidas. Dessa forma o código é organizado
em camadas, a saber: conteúdo, apresentação e comportamento. Nesse guia
trataremos da camada de conteúdo e da camada de apresentação.
CAMADA DE CONTEÚDO
O desenvolvimento deve sempre começar por esta camada, todo o restante do
processo de desenvolvimento vai depender de como o conteúdo está estruturado.
Caso o conteúdo não esteja bem estruturado é provável que as camadas posteriores
apresentem problemas e dificuldades no desenvolvimento que seriam facilmente
resolvidas se a camada de conteúdo tivesse sido formatada corretamente.
Para desenvolver essa camada é utilizado as linguagens de estruturação, HTML,
XHTML, WML ou XML. O conteúdo é dividido em suas partes lógicas com seus blocos
de informações utilizando os elementos corretos na sua marcação.
Uma forma de se testar se essa camada foi estruturada corretamente é abrir o
documento, sem estilos, no navegador e verificar se este é compreensível com uma
estrutura seqüencial, que permita a leitura de forma natural.
Para uma melhor compreensão, a partir deste ponto denominaremos os arquivos de
conteúdo simplesmente como documento HTML, mesmo que este tenha conteúdo
XHTML, WML ou XML.
CAMADA DE APRESENTAÇÃO
A camada de apresentação é a parte visual do conteúdo. Ela deve ser construída após
a camada de conteúdo. A camada de apresentação utiliza as linguagens CSS e XSLT.
O desenvolvimento da camada de apresentação deve primar pela simplicidade. Deve-
se evitar propriedades que causem problemas em dispositivos ou alterar a camada de
conteúdo apenas para satisfazer uma necessidade específica da apresentação.
O resultado da apresentação deve ser testado em diversos navegadores,
principalmente os mais usados. Para maiores detalhes veja o capítulo Orientações
gerais sobre testes.
Padrões Brasil e-GOV – Cartilha de Codificação 11
12. É importante lembrar que a apresentação pode oferecer diferenças em cada
navegador ou dispositivo utilizado. Considere que isso é algo inerente ao meio. O
importante é que a página ou aplicação funcione.
CAMADA DE COMPORTAMENTO
É utilizada para modificar o comportamento dos elementos presentes na camada de
conteúdo, visando melhorar a experiência do usuário. Essa camada é opcional,
geralmente não suportada por dispositivos mais antigos. A página ou aplicação deve
funcionar na ausência desse suporte.
Essa camada é construída utilizando linguagens de script (javascript) e modelos de
objeto (DOM – Document Object Model).
2.2 HTML e XHTML
O HTML (HyperText Markup Language), Linguagem de Marcação de Hipertexto, é uma
linguagem usada para a codificação de documentos hipertexto.
O HTML é composto por elementos semânticos, que por sua vez são compostos por
tags (etiquetas) que são os comandos de codificação da linguagem. Cada elemento
HTML tem sua função estrutural, cabeçalhos, parágrafos, quebras de linha, etc.
Um elemento geralmente é composto de tag de abertura, conteúdo e tag de
fechamento. A tag de fechamento é opcional.
Ex: <p>Isto é um parágrafo.</p>
No exemplo acima <p> é uma tag de abertura de parágrafo e </p> uma tag de
fechamento. Há elementos que não utilizam tags de fechamento, como o IMG <img>,
por exemplo. Todos os elementos podem ter atributos. Os atributos definem uma
propriedade do elemento, são colocados sempre na tag de abertura logo após o nome
do elemento.
Ex: o atributo alt que indica a substituição da imagem pelo texto alternativo.
<img src="/img/bandeira.png" alt="A bandeira do Brasil">.
Padrões Brasil e-GOV – Cartilha de Codificação 12
13. O XHTML (Extensible HyperText Markup Language), é a reformulação do HTML 4 para
XML 1.0. Alguns pontos devem ser observados relativos a diferenças entre o XHTML e
o HTML:
Deve-se usar caixa baixa e aspas em todos os valores
errado: <A HREF="index.html" CLASS=interno>
certo: <a href="index.html" class="interno">
Todos elementos devem ser fechados: incluindo os elementos que em
HTML não possuem tag de fechamento:
errado: <img src=”ilustracao.gif” alt=” ”>
certo: <img src=” ilustracao.gif” alt=” ” />
errado: <p>Todos os elementos devem ser fechados.
certo: <p> Todos os elementos devem ser fechados.</p>
Nenhum atributo pode ser abreviado: Em HTML alguns atributos podem
ser minimizados, mas em XHTML isso não é permitido.
errado: <input type="checkbox" id="checkbox1" name="checkbox1"
checked>
certo: <input type="checkbox" id="checkbox1" name="checkbox1"
checked="checked" />
Não utilizar elementos e atributos em desuso: Essa regra vale tanto para
a adoção do XHTML 1.0 Strict quanto o HTML 4.01 Strict. Alguns elementos em
desuso: FONT, CENTER - e atributos: alink, width, height (para alguns
elementos) e background. Para uma lista completa consulte o sítio da W3C.
2.3 CSS (cascating style sheets)
O CSS, folhas de estilo em cascata, deve ser utilizado para controlar todo o leiaute de
um documento. O suporte ao CSS varia de navegador para navegador, mas de forma
geral, todos suportam o CSS1, apesar de algumas diferenças.
SINTAXE CSS
Uma regra CSS consiste em um seletor com uma ou mais declarações. O seletor
determina qual elemento HTML é afetado pela regra. Cada declaração consiste em
Padrões Brasil e-GOV – Cartilha de Codificação 13
14. uma propriedade e seu valor. O bloco de declaração é encapsulado por chaves “{ }” e
cada declaração é encerrada por um ponto-e-vírgula “;”
EX: h1 { font-weight:bold; color: #fc0; }
Onde: h1 é o seletor que significa que a regra afeta o elemento <h1>, a regra contém
duas declarações que indicam que o elemento está em negrito e tem a cor laranja.
MEDIA TYPES
É possível, através dos media type, criar uma folha de estilos para cada dispositivo
que o usuário for acessar, otimizando a apresentação para cada dispositivo.
A especificação prevê diversos dispositivos, nem todos com implementação plena:
all – todos os tipos de dispositivos;
screen – computadores;
print – impressoras;
handheld – PDAs, mobiles Palmtops;
projection – apresentações, slides;
aural - Sintetizadores de voz;
braille - dispositivos táteis em braille;
embossed - impressoras de braille.
tv – televisões;
tty - terminais, dispositivos portáteis.
Atualmente, apenas as media types, screen e print funcionam perfeitamente. As
demais se encontram em estudo e implementação.
Uma forma de permitir a melhor acessibilidade dos conteúdos é evitar o atributo
media all. O mais correto é utilizar a media screen quando a folha de estilos for
desenvolvida para apresentação no computador.
CHAMADAS DE CSS
Há três formas de chamar, ou anexar, uma folha de estilo em um documento HTML. A
indicada pelos padrões e boas práticas é a folha externa. As folhas internas e estilos
inline devem ser evitados, pois misturam no documento HTML a apresentação e a
estrutura.
Padrões Brasil e-GOV – Cartilha de Codificação 14
15. Externa: A folha de estilo se encontra em um ou mais arquivos separados. É o
mais recomendado, pois possui diversas vantagens: A folha de estilos é
carregada apenas uma vez, o tamanho do documento HTML é menor, e é
preciso editar apenas um arquivo para mudar a apresentação de todo o site.
Os arquivos contendo o CSS são chamados no cabeçalho do documento na
seguinte forma:
<link rel="stylesheet" type="text/css" media=“screen” href="style.css" />
ou utilizando a regra @import rule dentro do elemento <style>:
<style type="text/css">@import url("style.css") screen;</style>
Interna: A folha de estilos é descrita no elemento <style> dentro do cabeçalho
<head>.
EX: <style type="text/css">h1 {font-weight:bold;}</style>
Inline: A regra css encontra-se no corpo do documento HTML.
EX: <h1 style="font-weight:bold;">Nosso título</h1>
A chamada de várias folhas de estilo para diferentes dispositivos pode ser feita das
seguintes formas:
Externa 1 – importando um arquivo CSS usando o @import, aonde primeiro
vem o nome do arquivo e depois o dispositivo a que ele se destina.
@import url("impressao.css") print
Externa 2 –Por meio da tag LINK
<link rel=”stylesheet” type=”text/css” media=”print” href=”impressao.css” />
Padrões Brasil e-GOV – Cartilha de Codificação 15
16. Interna – Utilizando o @media. Nessa caso pode ser construído tanto dentro do
documento HTML (não recomendado) quanto dentro do documento CSS.
No HTML
<style>
@media screen { p {font-family:verdana,sans-serif; font-size:1em;}}
@media print { p {font-family:times,serif; font-size:10pt;}}
</style>
No CSS
@media screen {p {font-family:verdana,sans-serif; font-size:1em;}}
@media print { p { font-family:times,serif; font-size:10pt;}}
Padrões Brasil e-GOV – Cartilha de Codificação 16
17. 3. Recomendações
As recomendações oferecem um grupo abrangente de boas práticas para o
desenvolvimento da codificação, levando em conta as necessidades de acessibilidade
e usabilidade. As recomendações estão separadas em: gerais; para o cabeçalho; para
o corpo do documento; para a apresentação do documento e para utilização de outros
formatos.
3.1 Recomendações gerais
1. Utilize arquivos externos para as Folhas de estilo e Javascript.
O CSS e o javascript devem estar sempre em arquivos externos a serem chamados
pelas páginas do sítio/portal.
Os arquivos CSS podem ser chamados das seguintes formas:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
ou
<style type="text/css"> @import url("style.css") screen;</style>
Já os arquivos javascript devem ser chamados da seguinte forma:
<script type="text/javascript" src="/js/script.js"></script>
2. Limite as requisições HTTP
Muitas requisições HTTP (a quantidade de arquivos chamados: imagens, folhas de
estilo, scripts, vídeos, etc) reduzem o desempenho do navegador.
Limite o número de requisições. Folhas de estilo e script externos são carregadas
apenas uma vez, ficando armazenadas no cache do navegador. Com o cache
carregado transfere-se apenas o conteúdo e eventuais novas imagens.
3. Todas as páginas devem ter recursos de impressão amigável.
As páginas devem fornecer recursos de impressão amigável, seja via javascript ou via
a utilização de uma CSS voltada para impressão. Deve-se verificar a real necessidade
do usuário, retirando da impressão elementos não relevantes como banners e menus.
Padrões Brasil e-GOV – Cartilha de Codificação 17
18. O texto, o conteúdo principal, nunca deve ser cortado ou de alguma forma prejudicado
na impressão.
O CSS tem uma folha própria para impressão, através da media type print, prevendo
margens, mudança do valor de pixel para pontos, mudança de fonte e quebras de
página. Para a criação de folhas de estilo para impressão consulte a especificação CSS
no sítio do W3C.
4. Evite a utilização do recurso quadros (frame).
Páginas utilizando quadros (frame) eram comuns no início da web e tinham como
função economizar o uso de arquivos como cabeçalhos e menus. Com o avanço das
novas linguagens e novos aplicativos esse recurso tornou-se obsoleto.
Alguns motivos para o não-uso de quadros:
A impressão é dificultada, pois muitos usuários não sabem selecionar o quadro
certo que querem imprimir;
Os serviços de busca têm mais dificuldade em indexar páginas com quadros. A
página acaba perdendo pontos em sua localização.
Dificulta a acessibilidade do sítio. Pessoas que não usam navegadores gráficos
têm mais dificuldade em navegar em páginas com quadros.
5. Evite o uso de pop-ups.
Pop-ups são janelas de diversos tamanhos que abrem com avisos e publicidade. Esse
recurso deve ser evitado a todo o custo em sítios governamentais.
Alguns motivos para o não uso de pop-ups:
Os navegadores mais modernos bloqueiam pop-ups. Sendo assim, se algum
informe importante é dado pelo pop-up ele não é visto.
Pop-ups não são acessíveis. Usuários que usam programas leitores de tela
podem se perder, sem saber onde estão ou se realmente entraram no sitio
pretendido.
Alguns pop-ups mais modernos costumam burlar o sistema anti-pop-up dos
navegadores carregando na própria página, atrapalhando a leitura do
conteúdo.
Padrões Brasil e-GOV – Cartilha de Codificação 18
19. Informações importantes devem sempre estar em destaque dentro da página. Na
diagramação reserve um espaço para os destaques, que pode ser desativado caso não
esteja sendo usado. Nunca use pop-ups para avisos importantes, como recadastro de
usuários ou para carregar aplicações ou novas instâncias da página.
6. Documente o código.
O código deve ser documentado de forma que qualquer membro da equipe consiga
entendê-lo. Blocos de informação devem ser separados com comentários.
Comentário (X)HTML
<!-- isso é um comentário html -->
Comentário CSS
/* isso é um comentario css */
7. URLs devem ser amigáveis.
Cada página de um sítio deve ser identificada com sua URL única e compreensível.
Certo: http://www.portal.gov.br/contato
Errado: http://www.portal.gov.br/default.php?reg=2&p_secao=18
Além de facilitar a memorização do endereço para o usuário a primeira opção permite
que mecanismos de busca indexem a página. Muitos mecanismos de busca não
indexam páginas que contenham pontos de interrogação (?) ou outro caractere (como
um & ou =) na sua URL.
8. As URLs devem funcionar sem o "www".
Aconselha-se que a URL funcione sem o www. Muitos navegadores já desconsideram o
trigrama e deixam o usuário digitar apenas o nome do domínio.
9. Evite elementos ou atributos proprietários, em desuso ou obsoletos.
Atributos em desuso (deprecated) ou obsoletos (obsolete) segundo a W3C tendem a
não ser suportados nos dispositivos futuros. Consulte o sítio do W3C para a lista de
atributos em desuso ou obsoletos.
Padrões Brasil e-GOV – Cartilha de Codificação 19
20. Atributos proprietários costumam funcionar apenas nos dispositivos para os quais
foram desenvolvidos. Devem ser usados como subterfúgios para resolver problemas
pontuais do próprio navegador e não devem ser utilizados como a solução padrão para
o código.
10. Evite a utilização desnecessária de elementos HTML e classes.
Mantenha o código o mais limpo e sintético possível. Utilize os atributos “class” e “id”
com parcimônia assim como os elementos SPAN e DIV.
EX: Criação de um parágrafo diferenciado.
Errado: <div id="main">
<div class="maincontent">
<p class="maincontenttext">O texto.</p>
</div>
</div>
Nesses casos, deve-se utilizar os seletores contextuais no código CSS:
Certo:
No HTML:
<div id="main">
<div>
<p> O texto. </p>
</div>
</div>
Na folha de estilos:
div#main p { /* regras */ }
11. Evite a utilização de tabelas para leiautes.
A implementação atual de folhas nos navegadores torna desnecessária a utilização de
tabelas para diagramação. O uso de HTML para estruturar a página e CSS para
formatar a apresentação visual, beneficia a acessibilidade da página, inclusive ao
carregar em dispositivos móveis, além de diminuir consideravelmente o tamanho do
código.
Padrões Brasil e-GOV – Cartilha de Codificação 20
21. 3.2 Elementos do cabeçalho
Entende-se por elementos do cabeçalho a parte inicial do código, não aparente nos
navegadores, que inclui o DOCTYPE, a declaração de linguagem e demais elementos
encontrados dentro do elemento head - tags <head></head>.
1. Declare o doctype correto da página.
Todo documento HTML e XHTML deve declarar o doctype correto para ser considerado
válido. O doctype informa ao navegador o tipo de documento que deve ser usado ao
carregar a página. É também por meio da declaração de doctype que as ferramentas
de validação analisam o código da página e indicam correções.
Os tipos de doctype existentes são:
Strict: Exclui totalmente atributos em desuso e apresentação, tais como
cor de fundo de página e tamanho de fontes. Toda a estrutura visual da
página deve ser feita a partir de folhas de estilo. A recomendação da W3C é
que se dê, sempre, preferência ao Doctype Strict.
Ex:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional: Recomendado para projetos onde há uma transição e
dificuldades em curto prazo com sistemas legados. É mais tolerante em
relação à utilização de elementos e atributos de apresentação.
Ex:
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Padrões Brasil e-GOV – Cartilha de Codificação 21
22. Frameset: usado quando se utiliza quadro (frames) nos sítios. O uso de
quadros não é recomendado e deve ser desestimulado no desenvolvimento
de novos sítios.
Ex:
HTML 4.01 Strict Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Para a lista completa de DOCTYPES consulte o sítio da W3C.
2. Declare o Idioma utilizado.
O idioma principal da página deve ser declarado. Além de auxiliar na acessibilidade do
conteúdo, a indicação correta da linguagem auxilia a indexação correta nos
buscadores.
A declaração de idioma pode ser realizada de várias formas:
Em HMTL 4.01
<html lang="pt-br">
Em XHTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" >
Como meta etiqueta
<meta http-equiv="Content-Language" content="pt-br" />
Note que a declaração de idioma também atende as recomendações da Cartilha
técnica do e-Mag – Modelo de acessibilidade em Governo Eletrônico.
Além da linguagem, pode-se indicar a localização da página e o país–alvo, por meio
das seguintes meta-etiquetas:
<meta name="target_country" content="br" />
<meta name="country" content="Brazil" />
Padrões Brasil e-GOV – Cartilha de Codificação 22
23. 3. O Título deve ser relevante e presente em todas as páginas.
O título de uma página é o enunciado entre as tags <title></title> e deve ser um dos
elementos obrigatórios do cabeçalho. É importante que o título esteja de acordo com o
conteúdo. O título define o rótulo padrão dos favoritos e é a chamada na listagem dos
motores de busca. Recomenda-se:
Evitar expressões redundantes como “bem-vindo ao sítio do ministério x”
ou “sítio do ministério x”, “página”, “homepage”, entre outros;
Não utilize qualquer tipo de slogan no início do título, caso necessário,
utilize após o nome do órgão ou projeto separado por hífen. Ex:
<title>Projeto XYZ – Mais desenvolvimento e cidadania</title>;
Evite o emprego de siglas de instituições ou de seus departamentos,
projetos ou programas.
Utilizar, de preferência, o assunto da página seguido pelo nome do órgão
separado por hífen. Ex: <title>Contato - Ministério do Planejamento
Orçamento e Gestão </title>;
O título deve ter no máximo 60 caracteres;
Não “polua” o título com palavras-chaves. A inserção de palavras-chaves
antes ou após o título principal da página pode confundir os usuários que
utilizam leitores de tela. Utilize as tags meta para palavras-chave.
Importante: Alguns buscadores apenas mostrarão os primeiros 50 – 60 caracteres do
título, enquanto outros mostrarão o título completo.
4. Descreva a codificação de caracteres da página.
De acordo com a W3C, o conjunto de caracteres mais adequados para documentos
XML e HTML 4.0 é Unicode (utf-8). É importante que a codificação de caracteres para
qualquer documento seja claramente indicada, de modo a que os dispositivos do
cliente possam facilmente mapear a codificação.
A indicação Unicode (utf-8) poderá ser feita das seguintes formas:
Usar o parâmetro 'charset' no Content-Type do cabeçalho HTTP.
Content-Type: text/html; charset=utf-8
Padrões Brasil e-GOV – Cartilha de Codificação 23
24. Em XHTML pode-se usar o pseudo-atributo para codificação na declaração xml no
início do documento ou a declaração textual no início da entidade.
<?xml version="1.0" encoding="utf-8" ?>
Para HTML ou XHTML pode-se usar a tag <meta> dentro do cabeçalho <head> do
documento. Sendo que em XHTML, deve-se colocar uma barra "/" no final.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
3.3 Corpo
1. Utilize os elementos corretos para a marcação do código.
Utilize os elementos de marcação de acordo com a sua finalidade. Para marcar títulos
utilize <h1>, <h2>, <h3>, <h4>, <h5> ou <h6> dependendo do nível do título ou
subtítulo, sendo <h1> o título mais alto. Use o elemento <p> para demarcar os
parágrafos. Não crie classes de CSS para apresentar um elemento em um formato não
condizente com seu objetivo.
EX: Um título de nível dois.
Errado: <div id="main">
<p class="titulosec">
O subtítulo
</p>
</div>
Certo: <div id="main">
<h2>
O subtítulo
</h2>
</div>
Padrões Brasil e-GOV – Cartilha de Codificação 24
25. 2. A página deve possuir apenas um elemento H1.
Toda página deve possuir um e apenas um elemento H1. O conteúdo do cabeçalho
deve guardar semelhança com o conteúdo do elemento TITLE do cabeçalho.
3. Marque listas de itens e objetos de forma adequada.
Existem três tipos básicos de listas: ordenada, não-ordenada, e de definição. Deve-se
escolher o tipo de lista a partir da informação que se quer inserir.
Lista Ordenada (ordered list – Tag OL): Sempre que a lista necessitar de
uma ordem, como a classificação em um concurso público, a lista ordenada é a
escolha correta.
Ex:
<ol>
<li>Primeiro colocado</li>
<li>Segundo colocado</li>
<li>Terceiro colocado</li>
</ol>
Lista Sem Ordem (unordered list – Tag UL): Utilizar quando a necessidade
for listar itens sem uma ordem de colocação. É a forma ideal para a codificação
de menus e barras de navegação.
Ex:
<ul>
<li>Quem somos</li>
<li>Projetos</li>
<li>Serviços</li>
</ul>
Lista de Definições (definition list – tags DL, DT e DD): Tem por objetivo
exibir uma lista de itens e suas respectivas definições. A lista de definições
possui duas partes distintas. O termo a ser definido ou descrito (tag DT), e a
descrição propriamente dita (tag DD). É o formato ideal para glossários.
Padrões Brasil e-GOV – Cartilha de Codificação 25
26. Ex:
<dl>
<dt>Navegador</dt>
<dd>Programa que permite ao usuário consultar e interagir com o material
publicado na Internet. </dd>
<dt>Padrões Web (Web standards)</dt>
<dd>Padrões Web são regras de tecnologia definidos pelo W3C e outros
órgãos da área utilizados para criar e interpretar o conteúdo Web.</dd>
</dl>
Para a formatação de visual, na folha de estilos, além dos elementos comuns as
demais tags, as listas possuem a propriedade list-style-type (tipo de estilos de lista).
Os atributos variam de acordo com o tipo de lista.
EX: A lista ordenada tem como padrão a lista numérica em ordem crescente, mas é
possível mudar de acordo com o atributo dado:
list-style-type: lower-alpha; (a, b, c, d, e etc)
list-style-type: upper-roman ; (I, II, III, IV, V, etc.)
list-style-type: decimal-leading-zero ; (01, 02, 03, etc.)
list-style-type: none (nenhum estilo de lista aparece)
Para mais informações consulte a especificação CSS no sítio da W3C.
4. Tabelas devem ser utilizadas para dados tabulares.
Para tornar os dados das tabelas acessíveis é importante utilizar os diversos
componentes disponíveis como o cabeçalho <th> e o atributo de sumário.
Para maiores detalhes da marcação acessível em tabelas consulte a cartilha técnica
do e-MAG.
5. Formate os formulários de forma correta e acessível.
O formulário deve ser construído de forma lógica utilizando os elementos disponíveis
corretamente. Os elementos <label>, <fieldset> e <legend> devem ser utilizados.
Um formulário bem estruturado recebe, sem problemas, sua formatação via CSS.
Padrões Brasil e-GOV – Cartilha de Codificação 26
27. Para maiores detalhes da marcação acessível em formulários consulte a cartilha
técnica do e-MAG.
3.4 Folhas de estilo
1. A folha de estilos deve ser externa.
Apesar de permitido pelo W3C, o uso de estilos inline (estilos dentro do código) para o
HTML 4.01 e para o XHTML 1.0, é desaconselhado, pois mistura as camadas de
estrutura e apresentação dificultando a manutenção do código.
A folha de estilos (CSS) deve estar sempre em um ou mais arquivos à parte do código,
mantendo a separação entre estrutura e apresentação.
2. A página deve ser compreendida e usável com o css desabilitado.
Alguns recursos como o uso de imagens no lugar de texto, ou de menus dinâmicos,
podem incorrer na perda de acessibilidade e compreensão quando o CSS é
desabilitado. Assegure-se que a página é compreensível e usável com o CSS
desabilitado.
3. Nomeie classes e IDs pela sua função, não pela apresentação.
O nome de classes e IDs devem ser pensados de acordo com a sua finalidade e não
por sua localização na diagramação ou suas características. Isso evita que ao mudar o
visual da página o sentido do nome da classe ou ID se perca.
EX: Uma div que contenha uma lista vertical de menu:
Errado: #colunaesquerdavertical {/* regra */}
Certo: #menu {/* regra */}
EX2: Uma classe que defina um texto de aviso ou advertência.
Errado: .vermelho {/* regra */}
Certo: .aviso {/* regra */}
Padrões Brasil e-GOV – Cartilha de Codificação 27
28. 4. Ordem e organização.
Organize a folha de estilos de forma que ela faça sentido aos diversos
desenvolvedores do projeto. Crie blocos de regras lógicos, separados por comentários
no início e no final de cada um. Uma lista lógica de regras pode ser separada da
seguinte forma:
1. Regras para estrutura geral do código (*, html, body, cabecalho, rodapé, etc);
2. Regras para navegação;
3. Regras para as divs na ordem que aparecem no código;
4. Regras gerais para seletores (H1, H2, etc...);
5. Regras para links;
6. Regras CSS para listas;
7. Regras CSS para elementos dentro das divs;
8. Regras CSS para classes gerais;
9. Outras regras;
Dentro de cada regra defina uma ordem de propriedades (ex: alfabética) e mantenha
essa ordem para todos os seletores.
Abrevie as regras CSS para as propriedades que assim as admitem. Algumas
propriedades como margin e padding permitem que se abrevie seus valores, seguindo
sempre a ordem de topo, direita, fundo e esquerda:
EX: Dada a declaração:
#conteúdo {
margin-top: 10px;
margin-right: 8px;
margin-bottom: 0;
margin-left: 20px;
}
Ela pode ser abreviada da seguinte forma:
#conteúdo {margin: 10px 8px 0 20px; }
Especifique sempre unidades para valores não iguais a zero. O CSS requer que se
especifique as unidades (pixels, ems, percentagem, etc...) em propriedades como
padding, width, height e font-size. A exceção é quando esse valor é igual a zero (ex:
padding=0;). Nesse caso zero é zero e não importa que unidade esteja sendo utilizada.
Padrões Brasil e-GOV – Cartilha de Codificação 28
29. Links e suas pseudo-classes devem ter regras CSS declaradas em ordem correta para
funcionarem corretamente:
1. a:link { /* regra */}
2. a:visited { /* regra */}
3. a:hover { /* regra */}
4. a:active { /* regra */}
Seletores semelhantes devem ser agrupados sempre que for possível:
EX: Todos os cabeçalhos em negrito com uma linha de borda:
h1, h2, h3, h4, h4, h5, h6 {border: 1px solid #000;}
Utilize a herança CSS e o elemento cascata para simplificar a Folha de Estilos.
EX1: Declare a família de fontes no início do documento, dessa forma não é
necessário declará-la em nenhum outro seletor:
body {font-family: Verdana, Helvetica, Sans-serif; }
PS: Outros seletores que podem ser utilizados: html e * (seletor universal)
EX2: Utilizando o efeito cascata.
h1, h2, h3, h4, h4, h5, h6 {
border: 1px solid #000;
color: #000;
text-align:right;
}
h1 { color: #0000cd; }
Dessa forma os títulos H1 passam a ter a cor azul, mas mantendo todas as
características das declarações anteriores. Para que o efeito de cascata funcione é
importante que a regra que altere a declaração ocorra depois da regra geral.
5. Declare famílias de fonte alternativas.
Nem sempre o sistema/navegador que o usuário utiliza possui a fonte escolhida. Deve-
se selecionar uma família de fontes possíveis, sem exagero no número de alternativas.
Uma família de três fontes, terminando com uma genérica é o ideal. Deve-se testar o
desenho com as fontes alternativas para verificar se há problemas de leitura.
EX: p {font-family: Verdana, Helvetica, Sans-Serif;}
Padrões Brasil e-GOV – Cartilha de Codificação 29
30. 6. Utilize preferencialmente unidades de tamanho relativas.
Evite o uso de tamanhos de fontes em unidades absolutas px ou pt nas folhas para
mídias digitais, dando preferência pelo uso de tamanhos relativos tipo em e %. Para o
tamanho padrão de texto utilize 1em ou 100%, use tamanhos menores apenas para
informações de copyright ou semelhante.
7. Utilize preferencialmente letras para nomear classes e ids.
Nomeie classes utilizando apenas letras. O uso de números, underscore e caracteres
especiais, quando não proibidos, são permitidos com restrições. O hífen pode ser
utilizado com parcimônia e não pode ser utilizado no início do nome da classe ou id.
3.5 Uso de scripts e cookies
1. Não utilize scripts que não ofereçam um benefício relevante ao conteúdo.
O uso de scripts deve ser evitado se não tiver uma função relevante ao funcionamento
da página: textos animados, janelas pop-ups, efeitos especiais, etc, devem ser
evitados.
2. O documento deve ser acessível mesmo com o script desabilitado.
A camada de comportamento deve ser opcional, pois pode não funcionar em todos os
dispositivos.
3. Evite soluções proprietárias e teste o script em diversos navegadores.
O script deve ser testado em diversos navegadores para atestar sua funcionalidade.
Evite soluções proprietárias que funcionem apenas em um navegador.
4. Forneça uma alternativa ao conteúdo script utilizando o atributo
NOSCRIPT.
Esse atributo pode conter um link para uma alternativa acessível do conteúdo. Para
maiores detalhes sobre alternativa acessíveis consulte a Cartilha Técnica do e-
MAG.
Padrões Brasil e-GOV – Cartilha de Codificação 30
31. 5. O conteúdo e o propósito de um cookie deve ser sempre informado ao
usuário.
O motivo da instalação de um cookie deve ser sempre avisado ao usuário. O usuário
deve ter a opção de recusar um cookie se achar conveniente.
6. O usuário pode recusar o uso de um cookie sem afetar a usabilidade
central do conteúdo.
A recusa da instalação de um cookie não deve afetar o objetivo central do sítio. O
cookie não deve ser utilizado como prerrogativa para acesso a página principal do sítio
ou tarefas banais, como uma escolha de seção.
3.6 Arquivos em outros formatos e uso de plugins
1. Avalie a real necessidade do uso de um arquivo para baixar.
A opção por um arquivo que deve ser baixado pelo usuário deve ser cuidadosamente
avaliada. Publicações complexas e extensas, com muitos gráficos e dados tabulares,
costumam ser dispostas em formatos prontos para impressão como o PDF. No entanto
é importante lembrar, que muitos desses formatos não são acessíveis. Muitas vezes o
arquivo tem um tamanho grande demais e demora a ser baixado pelo usuário. Avalie
com cuidado essa solução e sempre prefira disponibilizá-la em HTML.
2. O nome do arquivo deve ser relacionado ao seu conteúdo.
O nome do arquivo a ser baixado deve estar de acordo com o conteúdo do documento.
Nomes genéricos como “planilha01” ou apresentação.ppt devem ser evitados. Nomes
compostos devem ser separados por hífens “-“, nunca espaços em branco ou
underscore.
3. Evite o uso de formatos proprietários ou não acessíveis.
Toda informação contida em um formato proprietário ou não acessível deve estar
também disponível em outra opção acessível e não-proprietária.
4. Forneça alternativa em texto para vídeo e áudio.
Para garantir a acessibilidade deve haver descrições dos arquivos de áudio e vídeo.
Para maiores detalhes consulte a Cartilha Técnica do e-MAG.
Padrões Brasil e-GOV – Cartilha de Codificação 31
32. 5. Informe o tamanho e o formato do arquivo a ser baixado.
Isso permite que o usuário programe a baixa de arquivos e tenha uma idéia de quanto
tempo a tarefa demorará a ser concluída.
6. Avalie a real necessidade do uso de um plugin.
Plugins necessitam de instalação e manutenção por parte do usuário. Nem sempre
essa manutenção é fácil de ser realizada mesmo por pessoas experientes. Grande
parte dos plugins não é acessível, necessitando que sejam criadas versões alternativas
acessíveis.
7. Avise e forneça um endereço de onde o plugin deve ser baixado.
Avise claramente o usuário do uso do plugin. Na mesma página onde se encontram os
arquivos para serem baixados, ou a aplicação que necessita de um plugin, deve-se
fornecer o endereço web para obtenção do plugin ou leitor. O endereço deve ser da
empresa que mantém o programa. Plugins e leitores não devem ser hospedados em
páginas do governo. Disponibilizar plugins ou leitores no mesmo endereço das páginas
do governo cria tráfego desnecessário e onera os custos com hospedagem.
8. Nenhuma instalação deve ser necessária para acessar a página inicial ou
executar tarefas banais.
A exemplo dos cookies, nenhuma instalação de plugin deve ser necessária para
acessar a página inicial ou executar qualquer tarefa rotineira ou banal (ex: enviar um
formulário de contato) do sítio.
Padrões Brasil e-GOV – Cartilha de Codificação 32
33. 4. Orientações gerais sobre testes
Testar a apresentação, a estrutura e o funcionamento no sítio ou portal em diversos
ambientes é uma condição necessária para garantir a melhor experiência de uso
possível para o usuário.
4.1 Validação
Validação é a verificação que se faz para saber se um documento obedece às regras
de linguagem em que foi escrito. Pode-se comparar a validação com a busca por erros
gramaticais e de concordância em um texto escrito.
As ferramentas de validação permitem verificar não-conformidades no código ou CSS e
é útil para o diagnóstico de erros no código que podem estar interferindo em seu
funcionamento. No entanto, a validação não garante a qualidade da marcação, nem
previne o uso inadequado e o abuso de tags.
Além das ferramentas de validação para verificação do código, existem outras que
aferem a acessibilidade do conteúdo.
Para uma lista de alguns validadores disponíveis consulte o capítulo Recursos.
4.2 Resoluções de vídeo.
Recomenda-se que seja testado o comportamento da página, no mínimo, em três
resoluções: a padrão atual do mercado, uma mais abaixo e uma mais acima.
4.3 Navegadores e sistema
Deve-se testar o CSS e o HTML nos navegadores mais modernos para depois testar em
outros mais antigos. Outra regra a ser seguida é testar a página em navegadores que
sigam os padrões Web, como o Firefox e Ópera, para depois testar em navegadores
com suporte deficiente aos padrões. A seguir uma sugestão de ordem de teste em
navegadores:
Firefox e Ópera em Windows
São os dois navegadores mais próximos dos padrões web. Se o desenho e
estrutura da página funcionam nesses dois navegadores, poucos ajustes
precisaram ser realizados nas configurações a seguir.
Padrões Brasil e-GOV – Cartilha de Codificação 33
34. Internet Explorer 7.0 e 6 em Windows XP
São os navegadores mais utilizados do mercado e possuem muitas não-
conformidades com os padrões web. A Microsoft recomenda que os ajustes de
CSS que precisem ser realizados devem ser feitos por meio de comentários
condicionais (conditional comments).
Firefox em Linux/Ubuntu
A possibilidade de erros nesse teste é pequena, já que o Firefox foi testado
anteriormente no Windows. Os erros mais comuns costumam acontecer na
camada de comportamento.
Safári em Mac
Apesar do número menor de usuários em Mac o teste nessa plataforma deve
ser realizado quando possível.
Há casos em que não é possível ter toda a gama de opções de sistemas e
navegadores disponíveis para teste. No entanto, é possível contar com ferramentas
que simulam sistemas e navegadores, disponíveis na internet. Dentre estas
ferramentas de apoio estão os desktops virtuais, programas que emulam um outro
sistema operacional, e sítios que prestam serviço de impressão de telas (screenshots)
dos mais diversos navegadores e sistemas.
Para uma lista com algumas ferramentas veja o capítulo Recursos.
4.4 Outros dispositivos
Dispositivos móveis
A tendência é um aumento da oferta do número de serviços governamentais via
celular. Depois da TV, o celular é o dispositivo eletrônico de maior uso. A adoção de
um desenho para serviços eletrônicos prevendo a sua utilização é algo que deve ser
levado em conta.
Uma forma de ofertar o serviço de forma diferenciada para esse novo meio é o uso de
folhas de estilo (CSS).
Para uma consulta sobre folhas de estilo próprias para cada meio consulte o Capítulo
3 Padrões Web – 3.4 CSS. Para ferramentas de teste veja o capítulo Recursos.
Padrões Brasil e-GOV – Cartilha de Codificação 34
35. Visualização de impressão
Esse é um teste relativamente simples, mas que não deve ser negligenciado. Deve-se
verificar se o conteúdo central do documento foi impresso satisfatoriamente, se não há
desperdício de tinta ou papel para o usuário.
4.5 Teste em camadas
O teste em camadas é utilizado para verificar a acessibilidade e usabilidade do
conteúdo em algumas configurações que podem ser definidas pelo usuário.
Páginas com imagens desabilitadasAlguns usuários mantêm o CSS, mas
desabilitam as imagens para um carregamento mais rápido. Devem-se desabilitar as
imagens do navegar e verificar se o entendimento e navegação do conteúdo estão
intactos.
Navegador sem suporte ao css
Alguns navegadores mais antigos não possuem suporte ao css. Para testar essa
situação, desabilite o css do navegador e verifique se o entendimento e navegação do
conteúdo estão intactos.
Página sem suporte a Javascript
Por questões de segurança muitos usuários mantêm o javascript desabilitado.
Navegadores por texto e por voz muitas vezes não compreendem javascript. Deve-se
desabilitar o javascript e verificar se o entendimento e navegação do conteúdo estão
intactos.
4.6 Teste de acessibilidade
Tais como as ferramentas de validação de código, as ferramentas de validação de
acessibilidade não garantem a qualidade do que é descrito. Por exemplo, a ferramenta
atesta a existência de texto alternativo – o atributo “alt” – nas imagens, mas não
garante se o que está escrito no texto alternativo condiz com a imagem ou é sua
melhor descrição. No entanto, a validação da acessibilidade é útil na verificação de
não-conformidades e para o diagnóstico de erros. Para uma listagem desse
validadores veja o capítulo Recursos.
Padrões Brasil e-GOV – Cartilha de Codificação 35
36. Programas Leitores de Tela
Os usuários com necessidades especiais utilizam-se de programas capazes de ler e
interpretar diretamente a tela do computador. De acordo com o modelo de
acessibilidade em Governo Eletrônico - e-MAG deve-se utilizar esses programas para
testes finais de acessibilidade. Sempre que possível recomenda-se a utilização de
usuários com necessidades especiais para efetuar testes nas páginas do sítio.
Navegadores de texto
O navegador de texto exibe todo o conteúdo das páginas na Internet em formato
texto, sem imagem, sons ou animações, e pode ser usado tanto pelas pessoas
portadoras de deficiência visual como pelas que acessam a Internet com conexão
discada. Pode ainda, ser utilizado em conjunto com o leitor de tela.
Análise de contraste
É importante verificar se o jogo de cores da página proporciona contraste suficiente
para leitura do conteúdo. Além do conhecimento das escalas de contraste e do bom-
senso, alguns testes podem ser realizados. Para uma listagem de algumas dessas
ferramentas veja o capítulo Recursos.
Visualização em letras grandes
A exemplo do contraste deve-se prestar atenção ao funcionamento da página no caso
de alteração do tamanho das letras. Muitos usuários usam uma configuração de texto
maior para facilitar a leitura. Para verificar problemas nesses casos pode-se utilizar o
menu de exibição do tamanho de texto no navegador que está sendo utilizado.
Padrões Brasil e-GOV – Cartilha de Codificação 36
37. 5. Problemas mais comuns
Abaixo listamos alguns dos problemas mais comuns encontrados durante o
desenvolvimento. O conhecimento das origens desses problemas auxilia na prevenção
e diagnóstico.
DIFERENÇAS DO “MODELO DE CAIXA” ENTRE NAVEGADORES
O modelo de caixa (box model) é como se comportam as propriedades de espaço
(padding), borda (border), largura (width) e altura (height) dos elementos. O modelo
de caixa se aplica a qualquer seletor que utilize essas propriedades, independente
delas terem sido declaradas ou não.
Alguns dos problemas mais freqüentes na apresentação dos documentos referem-se a
diferenças do cálculo da largura e altura dos elementos. No modelo de caixa instituído
pela W3C, as propriedades espaço e borda são somados à largura e à altura, sendo
esse modelo entendido dessa forma por diversos navegadores. No entanto, em
navegadores como o Internet Explorer 5.*/Win, as medidas de espaço e borda não são
incluídas na altura e/ou na largura.
EX: No CSS que segue:
div.caixa {
width:300px;
padding:20px;
border:10px solid;
}
De acordo com a W3C a largura total do elemento é 360px:
10px + 20px + 300px + 20px + 10px = 360px
No entanto, o Internet Explorer 5.*/Win, interpreta a medida total como 300px, e a
largura final do conteúdo como 240px.
300px - 10px - 20px - 20px - 10px = 240px
Há diversas formas de se contornar o problema como, por exemplo, utilizando
comentários condicionais, hacks ou evitando declarar a largura, espaço ou borda em
um elemento.
Padrões Brasil e-GOV – Cartilha de Codificação 37
38. CUIDADOS COM A ACESSIBILIDADE AO UTILIZAR IMAGENS NO LUGAR DE TEXTO.
Substituir textos escritos em títulos e cabeçalhos por imagens utilizando-se para tanto
das propriedades text-indent e background-image do CSS, visando uma melhoria
estética da página é um recurso bastante utilizado no desenho de páginas.
No entanto esse recurso costuma apresentar problemas nos casos em que no
navegador, as imagens estão desabilitadas, mas a folha de estilo está ativa. A forma
encontrada até o momento é a adição da tag SPAN vazia e o uso do atributo “title”.
Para evitar que o mesmo problema ocorra nos leitores de tela, deve-se utilizar a media
screen na chamada da folha de estilos.
Código HTML
<h1 id="cabecalho" title=”Governo Federal”>
<span></span>Governo Federal</h1>
CSS
#cabecalho {
width: 329px;
height: 25px;
position: relative;
}
#cabecalho span {
background: url(tituloemimagem.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
LAPSO NA RENDERIZAÇÃO DO IE
Por vezes, quando se utiliza a regra @import para CSS externo, o Internet Explorer por
um lapso de tempo ‘pisca’ o conteúdo sem a renderização do CSS.
Esse problema é facilmente contornado utilizando o elemento LINK ou SCRIPT dentro
do cabeçalho <HEAD></HEAD>. Outras duas formas de solucionar o lapso da
renderização são:
Padrões Brasil e-GOV – Cartilha de Codificação 38
39. 1) Adicionando o elemento LINK
A solução a seguir consiste em adicionar outra folha de estilo por meio do elemento
LINK. Pode ser uma folha de estilo para outra mídia, como impressão ou,
simplesmente, uma folha de estilos em branco:
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>
2 ) Adicionando o elemento SCRIPT
Outra solução existente é inserir o elemento SCRIPT. Essa solução é recomendada
apenas se a página já possui um script funcionando.
<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>
Padrões Brasil e-GOV – Cartilha de Codificação 39
40. 6. Lista de verificação
A lista de verificação é um recurso para avaliar se as recomendações estão sendo
seguidas no desenvolvimento, evolução ou manutenção do sítio ou portal:
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"?
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?
Padrões Brasil e-GOV – Cartilha de Codificação 40
41. 7. Lista de formatos de arquivos e plugins
O objetivo desse capítulo é de apresentar uma lista resumida dos formatos de arquivos
e plugins mais utilizados. Não é nosso objetivo incluir todos os itens existentes.
ARQUIVOS DE TEXTO
Portable Document File (.pdf)
Arquivos PDF são criados utilizando um aplicativo proprietário da Adobe. Para leitura é
utilizado o programa Adobe Acrobat Reader de uso gratuito. Documentos salvos em
PDF costumam guardar quase a integridade de sua formatação original. O PDF possui
diversos níveis de proteção contra cópias e alterações indevidas, sendo o formato
mais seguro para documentos oficiais. No entanto, o formato não é considerado
acessível, o que gera a necessidade de dispor de versão alternativa.
Texto (.txt)
É o formato mais simples de texto. Documentos salvos em formato texto serão
legíveis, porém não terão qualquer formatação além da quebra de linhas e parágrafos.
Microsoft Word (.doc)
Formato nativo do Microsoft Word, processador de texto proprietário da Microsoft.
Existem alguns leitores gratuitos da Microsoft, mas não há garantias de
compatibilidade de versões e integridade da formatação. É o formato menos indicado
para disponibilizar um arquivo texto para Web.
Rich Text Format (.rtf)
É um formato de arquivo que permite a troca de textos entre diferentes processadores
de texto, em diferentes sistemas. Esse formato é preferível aos formatos .DOC.
Open Document Format (ODF)
O Open Document Format (ODF) possui formato aberto e é utilizado por vários
processadores como BROffice, Open Office e sistema web como o Google Docs and
Spreadsheets.
O padrão OpenDocument é de acesso público. Isso significa que pode ser
implementado em qualquer sistema, seja ele de código aberto ou proprietário. As
Extensões de arquivos usadas pelos documentos do OpenDocument são:
.odt para Processadores De Texto (text)
.ods para Planilhas Eletrônicas (spreadsheets)
Padrões Brasil e-GOV – Cartilha de Codificação 41
42. .odp para Apresentações em Slides (presentations)
.odg para Editor de imagens (graphics)
.odf para Equações Matemáticas (formulae)
TABULAÇÃO DE DADOS
Sempre que possível, prefira disponibilizar dados em formato HTML ou PDF.
Comma-Separated Values (.csv)
É o formato simples de salvar informação tabular e pode ser importada em qualquer
aplicação de tabulação de dados como Microsoft Excel ou aplicações de banco de
dados. Um CVS é um formato simples de tabulação onde vírgulas (comma em inglês)
separam cada coluna de informação e as linhas são separadas por quebras.
Open Document Spreadsheet (.ods)
Formato aberto de planilha do Open Document Format (ODF), presente em suítes
como BROffice, Open Office e sistema web como o Google Docs and Spreadsheets.
Microsof excel (.xls)
Formato proprietário do Microsoft Excel.
FORMATOS DE APRESENTAÇÃO
Sempre que possível, prefira disponibilizar apresentações em formato HTML ou PDF.
Open Document Presentation (.odp)
Formato aberto de apresentação, presente em suítes como BROffice, Open Office e
sistema web como o Google Docs and Spreadsheets. Ainda pouco utilizado.
Microsoft power point (.ppt .pps)
Formatos proprietários de apresentações da Microsoft.
FORMATOS DE IMAGEM
Graphics Interchange Format (.gif)
O formato GIF utiliza uma palheta de 256 cores, permitindo o uso de fundos
transparentes e de animação. O formato é mais indicado para ilustrações de cores
chapadas e a traço , como logotipos e ilustrações, com um número limitado de cores.
Padrões Brasil e-GOV – Cartilha de Codificação 42
43. Portable Network Graphics (.png)
É um formato livre, utilizado em alternativa ao GIF, recomendado pela W3C. O formato
PNG não tem limitação de 256 cores e permite retirar o fundo de imagens com o uso
do canal alfa, definindo o nível de opacidade, porém não comporta animação. Sua
indicação é a mesma do formato GIF, exceto no caso de animações, com mais
flexibilidade no uso de cores e transparências.
Joint Photographic Experts Group (.jpg ou .jpeg)
O formato JPEG is é o mais indicado em caso de fotografias, podendo salvar a
informação em mais de 16 milhões de cores. Por outro lado, o JPEG não é indicado
para imagens com cores chapadas e a traço devido a criação de diversos “artefatos”
em torno das linhas e áreas chapadas.
FORMATOS DE COMPRESSÃO
ZIP (.zip)
O ZIP é um dos formatos de compressão mais popular. Um arquivo ZIP contém um ou
mais arquivos que podem estar organizados em pastas e subpastas. Ao descompactar
o arquivo ZIP o usuário tem acesso aos arquivos na sua formatação e organização
original. Existem diversos programas que criam e extraem conteúdos de arquivos ZIP.
Alguns são gratuitos outros pagos.
Roshal ARchive (.rar)
O RAR é um formato proprietário de compactação de arquivos. Tem como principais
características a alta taxa de compressão e o suporte a arquivos grandes (mais de 4
Gb).
MULTIMÍDIA
Independentemente da escolha do formato multimídia, devem ser fornecidas versões
acessíveis para o conteúdo: trilhas de áudio e legenda para vídeos, versões
alternativas em HTML, etc.
Flash/ Shockwave (.swf)
Formato de aplicações multimídia proprietário da Adobe. O formato permite a criação
de páginas interativas e animadas. O plug-in para visualização é gratuito. No entanto,
o formato ainda possui pouco suporte à acessibilidade, não devendo ser utilizado em
banners ou páginas com informações essenciais – como um acesso ao um serviço.
Padrões Brasil e-GOV – Cartilha de Codificação 43
44. Quicktime (.mov)
Formato proprietário da Apple Computer, utilizado para armazenar seqüências de
vídeo pelos programas/plug-ins QuickTime e iTunes.
Moving Picture Experts Group (MPG/MPEG)
Formato de compressão de áudio e vídeo mantido pela International Organization for
Standardization. Sua especificação mais conhecida e utilizada é o mp3.
Real Player (RM/RA)
Formato proprietário da Real Networks Inc para seu tocador Real Player.
Windows Media Player (.wmv/.wma)
Formato proprietário da Microsoft para áudio e vídeo no PC. É baseado em uma
coleção de codecs que podem ser usados pelo Windows Media Player.
Active Streaming Format (.asf)
Formato de arquivo da Microsoft para executar vídeo digital via Internet (streaming).
Musical Instrument Digital Interface (.mid ou .midi)
Formato padrão de troca de informações musicais entre instrumentos musicais,
sintetizadores, e computadores.
Audio Video Interleave (.avi)
Formato encapsulador de áudio e vídeo proprietário da Microsoft.
Padrões Brasil e-GOV – Cartilha de Codificação 44
45. 8. Recursos
ORGANIZAÇÕES E ESPECIFICAÇÕES
World Wide Web Consortium (W3C) - http://www.w3.org
Especificação HTML 4.01 - http://www.w3.org/TR/html401
Especificação XHTML 1.0 – http://www.w3.org/TR/xhtml1
Especificação XHTML 1.1 - http://www.w3.org/TR/xhtml11
Especificação CSS 1.0 - http://www.w3.org/TR/CSS1
Especificação CSS 2.1 – http://www.w3.org/TR/CSS21
Especificação CSS 3.0 (em construção) - http://www.w3.org/Style/CSS/current-work
Codificação de caracteres - http://www.w3.org/International/O-charset.pt-br.php
Tutoriais W3C - http://www.w3.org/2002/03/tutorials
CSS Paged media - http://www.w3.org/TR/REC-CSS2/page.html
The Web Standards Project - http://www.webstandards.org/
VALIDADORES DE CÓDIGO
Validador (X)HTML - http://validator.w3.org
Validador CSS - http://jigsaw.w3.org/css-validator
Validador de Links - http://validator.w3.org/checklink
VALIDADORES DE ACESSIBILIDADE
ASES (WAI e e-MAG) - http://www.governoeletronico.gov.br
Da Silva (WAI e e-MAG) - http://www.acessobrasil.org.br
Cynthia Says (WAI) - http://www.cynthiasays.com
Lift (WAI) - http://www.usablenet.com
TAW (WAI) - http://www.tawdis.net
Hera (WAI) - http://www.sidar.org/hera/
Web@Examinator (WAI) - http://www.acesso.umic.pt/examinator.php
LEITORES DE TELA
Dosvox/Webvox (desenvolvido no Brasil) - http://intervox.nce.ufrj.br
Virtual Vision (desenvolvido no Brasil) - http://www.micropower.com.br
Jaws for Windows - http://www.freedomscientific.com
Emacspeak - http://emacspeak.sourceforge.net/
Gnopernicus - http://www.baum.ro/gnopernicus.html
Orça - http://live.gnome.org/Orca
DISPOSITIVOS MÓVEIS
Opera Mini - http://www.operamini.com
Padrões Brasil e-GOV – Cartilha de Codificação 45
46. Opera Mini Simulator - http://www.operamini.com/features/simulator
NAVEGADOR TIPO TEXTO
Ópera (simulador) - http://www.opera.com
"Exibir > Estilo > Modo usuário > Emular navegador de texto".
Lynx (navegador tipo texto) - http://lynx.browser.org
Lynx Viewer (simulador) - http://www.delorie.com/web/lynxview.html
SERVIÇOS DE IMPRESSÕES DE NAVEGADOR
BrowserCam (pago / trial de 24h) - http://www.browsercam.com
Browsershots (gratuito / screenshots expostas ao público) - http://browsershots.org/
DESKTOPS VIRTUAIS
PearPC (Windows) - http://pearpc.sourceforge.net/
VMWare (Linux) - http://www.vmware.com/
IEs4Linux (Linux – necessita Wine) - http://www.tatanka.com.br/ies4linux/
Parallels (Mac) - http://www.parallels.com/en/products/workstation/mac
MS Virtual PC - programa para virtualização da Microsoft
http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx
VISUALIZADORES DE ARQUIVOS E PLUGINS
Microsoft Word reader software - http://www.microsoft.com/Office/000/viewers.htm
Adobe online accessibility resource - http:// access.adobe.com
Microsoft Excel reader software - http://www.microsoft.com/Office/000/viewers.htm
Adobe Acrobat Reader - http://www.adobe.com/br
Flash player - http://www.macromedia.com/software/flash/
Shockwave player - http://www.macromedia.com/shockwave/
Quicktime player - http://www.apple.com/quicktime/download/
RealPlayer Basic player - http://www.real.com/
ANÁLISE DE PERFORMANCE
YSlow - http://developer.yahoo.com/yslow/
Análise de performance de carregamento da página e dicas para melhorá-la.
Padrões Brasil e-GOV – Cartilha de Codificação 46
47. EDITORES (X)HTML E CSS
Bluefish (Linux) - http://bluefish.openoffice.nl/index.html
NVU (Windows/Linux /Mac) - http://www.nvu.com
Possui editor visual.
PSPad (Windows) - http://www.pspad.com/en/
Possui dicionário em português-br e integração com Topstyle (editor CSS).
TopStyle Lite (Windows) - http://www.newsgator.com/NGOLProduct.aspx?
ProdId=TopStyle&ProdView=lite
EXTENSÕES FIREFOX
Extensões (extensions) são pequenos programas que adicionam funcionalidades ao
Firefox. Para ter acesso as extensões, basta ir a Ferramentas >Complementos>
Extensões > Mais extensões.
Navegador Firefox – http://br.mozdev.org/firefox
Web Developer - https://addons.mozilla.org/firefox/60
Várias ferramentas de desenvolvimento e teste.
HTML validator - https://addons.mozilla.org/firefox/249
Validador HTML baseado no TIDY, permite correções no código.
ColorZilla - https://addons.mozilla.org/firefox/271
Exibe a informação da cor selecionada.
HTML Tidy Library Project - http://tidy.sourceforge.net
Converte HTML para XHTML
Firefox Accessibility Extension
https://addons.mozilla.org/en-US/firefox/addon/1891?
Firebug - http://www.getfirebug.com/
ferramentas para análise código, folhas de estilo, testes e debug de javascript.
DOM Inspector - http://www.mozilla.org/projects/inspector/
Ferrramenta para visualizar e editar o DOM de um documento.
Padrões Brasil e-GOV – Cartilha de Codificação 47
48. 9. Leitura Complementar
e-MAG Modelo de acessibilidade de Governo Eletrônico
http://www.governoeletronico.gov.br/acoese-projetos/e-MAG/
CSS para Webdesign
http://www.maujor.com
O básico da Web
http://www.obasicodaweb.com/
Revolução etc
http://www.revolucao.etc.br
Tableless
http://www.tableless.com.br
A List Apart
http://www.alistapart.com
CSS Play
http://www.cssplay.co.uk/
CSS Discuss
http://www.css-discuss.org/
W3 schools
http://www.w3schools.com/
CSS Zen Garden
http://www.csszengarden.com/
Padrões Brasil e-GOV – Cartilha de Codificação 48
49. 10. Glossário
Acessibilidade
Significa permitir o acesso por todos, independente do tipo de usuário, situação ou
ferramenta. Significa ainda, criar ou tornar as ferramentas e páginas web acessíveis a
um maior número de usuários, inclusive pessoas portadoras de deficiências.
CSS (Cascading Style Sheets – Folhas de estilo em cascata)
Linguagem que descreve a apresentação, visual ou sonora, de um documento.
Hack
Hacks são subterfúgios utilizados pelos desenvolvedores como forma de contornar
problemas apresentados na apresentação de uma página devido à deficiência de um
dado navegador entender os padrões Web.
Navegador
Programa que permite ao usuário consultar e interagir com o material publicado na
Internet.
Padrões Web (Web standards)
Padrões Web são regras de tecnologia definidos pelo W3C e outros órgãos da área
utilizados para criar e interpretar o conteúdo Web.
URI (Uniform Resource Identifier - Identificador Unificado de Recurso)
É, basicamente, uma string (conjunto de caracteres) que seguem uma certa sintaxe e
é usado para definir identificar um recurso na web. O tipo mais comum de URI é a URL.
URL (Uniform Resource Locator - Localizador Unificado de Recurso)
Um tipo específico de URI, usado para definir a localização de um recurso na web.
Geralmente dizemos que a URL é o endereço de uma página web. Um exemplo de
URL: http://www.exemplo.com/pagina/
W3C (World Wide Web Consortium)
Consórcio de âmbito internacional com a finalidade de desenvolver especificações,
guias e ferramentas para web.
WAI: (Accessibility Initiative - Iniciativa de Acessibilidade na Web)
Tem como objetivo desenvolver protocolos que melhorem a interoperabilidade e
promovam a evolução da www.
Padrões Brasil e-GOV – Cartilha de Codificação 49
50. XHTML (Extensible HyperText Markup Language)
É a linguagem HTML reformulada para seguir as regras do XML.
XML (Extensible Markup Language)
Uma linguagem de marcação semelhante a HTML, mas que permite a descrição de
dados definidos por elementos de programação.
Padrões Brasil e-GOV – Cartilha de Codificação 50