Apostila e material de estudo sobre padrões web em português

Recentemente o site do Governo Eletrônico lançou um projeto implementar padrões web no site do governo. E inclusive lançou uma cartilha de codificação para auxiliar as administrações públicas.

O objetivo da cartilha é:

  • Estabelecer padrões de qualidade de uso, desenho, arquitetura de informação e navegação;
  • Estabelecer um fluxo de criação, desenvolvimento e manutenção na gestão dos sítios governamentais;
  • Consolidar a acessibilidade;
  • Criar artefatos de acordo com os padrões estabelecidos pelo W3C.

copyA apostila pode ser lida por qualquer desenvolvedor web, pois fala de padrões web em geral e não de sites do governo.

Clique aqui para baixar a cartilha.

Outra coisa que chamou a atenção essa semana, foi o blog do Danilo Nunes, ele está traduzindo um curso sobre padrões web que funcionários da Opera fizeram pra implementar nas universidades americanas, um projeto bem legal.

O curso (original, em inglês) tem 50 artigos, cada um bem detalhado. O Danilo Nunes disse que vai traduzir um por semana.

CSS background-image em uma imagem

Imagine uma imagem grande, que demora pra ser carregada.
E se colocar um loading na imagem?
É bem simples:

<img src="imagemPesada.jpg" alt="alt da imagem" id="imagemPrincipal"/>

E no css :

img#imagemPrincipal{
	background: url('loading.gif') no-repeatcenter center;
}

Um outro exemplo do que se pode fazer com isso, é colocar níveis de profundidade, veja o exemplo abaixo:

Esse não foi feito por mim, eu achei na internet mas infelizmente não sei quem fez para dar os créditos, se alguém souber, avise-me.

CSS Global Reset – Elimine as diferenças entre browsers

Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.

Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:

1º – CSS inline : aquela porqueira <div style=”float:left”>

2º – CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>

3º – CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>

4º – CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.

Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.

Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:

*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit; 
	font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”

Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.

Resumo de como foi o 1º Fórum W3C Brasil

O fórum realizado hoje na sede da NIC.br (Núcleo de Informação e Coordenação do Ponto br), diferente do padrão de eventos sobre internet no Brasil, contava com poucos programadores, muitos professores, diretores de empresas, com uma média de idade alta (talvez eu, com 25 anos, fosse o mais novo). O evento foi bem restrito, cerca de 60 pessoas apenas (contando com os palestrantes e organizadores) estavam por lá. O fórum foi a segunda atividade pública da W3C no Brasil.

E evento começou com Demi Getschko, Diretor-Presidente da NIC.br, contando um pouco da história da NIC.br, quem controla toda a estrutura dos dominios .br. A NIC.br foi criada a 5 anos e ativada a 3 anos atrás Muitas coisas interessante e curiosidades foram ditas, como por exemplo:

* Até 1997 os registros de domínios era gratuíto no Brasil, depois passaram para 50 reais anuais, 40 e agora 30.
* O Brasil já exportou (gratuítamente) o algorítmo que controla os dominios .br para outros países.
* Brevemente será lançado um domínio exclusivo para bancos (o que deve dificultar fraldes).

Everaldo Bechara, Presidente do iLearn, nos contou da dificuldade que era disseminar padrões WEB a anos atrás. houve muita resistência de empresas que acreditavam ter mais custos, desigers achavam que iam ter menos recursos, achando iria “engessar” o Layout, além dos CMS’s amarrados não deixavam implementar padrões, etc… Mas pensando bem, essas coisas melhoraram, mas não mudaram tanto.
Fórum W3C Brasil - Everaldo Bechara

Ricardo Kobashi, Coordenador dos sítios de governo falou bastante sobre acessibilidade e como o decreto 5296 ajudou na conscientização de padrões WEB. E que uma concessão da ONU que dá direitos as pessoas deficientes e poderá obrigar empresas do governo a implementar padrões WEB, promovendo acessibilidade para pessoas e dispositivos.
Fórum W3C Brasil - Ricardo Kobashi

Recentemente fizeram o site http://www.pessoacomdeficiencia.sp.gov.br/ e disseram ser acessível a qualquer pessoa / dispositivo, e esse site deve ser o padrão para sites do governo. Bom, se esse for o padrão, tenho algumas críticas:
1 – 113kb de JavaScipt?
2 – Recomendo usar a versão packed do jQuery, seriam 68kb a menos.
3 – Fazer uma versão dos “botões de acessibilidade” pra quem não tem JavaScript.

Klaus Birkendihl e Hugo Hoeschl falaram sobre Web Semântica. E para encerrar, anunciaram duas novidades da W3C Brasil que devem estrear até o fim de outubro: um grupo, com uma lista de emails e uma wikipedia para trocar informações de padrões web.
Wiki - W3C Brasil

Enfim, o evento que foi curto, 4 horas com um coffee break e um brunch (que não tinha nada vegan =/ ), serviu para pegar contatos e apresentar as ações da W3C no Brasil.