Recently in Web Standards Category
HTML5 e seu mundo comercial
- Marcação simples, não rigorosa;
- Desenvolvimento rápido;
- Custo baixo;
- Vulnerável a erros e comodidade na codificação;
- Menos risco de problemas visível aos usuários;
- Código não confiável;
- Preferível para desenvolvimento de pequena quantidade de arquivos com extensão html;
- Preferível aos projetos com código com constante alteração;
- Não recomendado ao desenvolvimento de ferramentas online, como sistemas administrativos de gerenciamento de conteúdo.
Como HTML5 atende legal as necessidades do dia-a-dia comercial, solicitações de clientes e coisas do tipo, esta sendo levado em alta na comunidade de desenvolvedores que são voltados ao dia-a-dia. Neste caso o mercado de navegadores também precisa entrar em cena e atender essas necessidades desses desenvolvedores.
XHTML2
XHTML não é contra o HTML, mas sim seu sucessor.
Foi baseado na mesma proposta do XML (linguagem praticamente perfeita para estruturação de conteúdo), é voltado a acessibilidade, a independência de dispositivo, usabilidade, interoperabilidade e semântica.
- Marcação simples, mas rigosa e requer que o desenvolvedor escreva o código correto;
- Código confiável;
- Recomendado ao desenvolvimento de ferramentas online e sistemas de gerenciamento de conteúdo;
- Preferível para desenvolvimento de grandes quantidade de arquivos com extensão html ou xhtml;
- Criado para atender melhor as necessidades da web semântica;
- Prioriza o conteúdo na web;
- Mais vulnerável a erros e falhas na renderização devido sua rigorosidade na marcação semelhante a do XML;
- Tempo de desenvolvimento maior;
- Custo mais elevado.
Infelizmente devido ao custo e tempo mais elevado o interesse comercial é relativamente baixo, com isso esta cada vez mais em alta HTML5 e em baixa XHTML2.
Não sabemos o futuro do XHTML2, sabemos com certeza que um dia será necessário incorporar algo mais no HTML5, com isso HTML5 desce e XHTML2 sobe ou pelo menos sua proposta é levada em consideração.
Mas então por que XHTML2 não é a sensação do momento? Pela simplicidade e consequentemente pela maior documentação e implementação nos navegadores que o HTML 5 permite. Porém, este carece de recursos só disponíveis em XHTML2, logo existe a possibilidade de uma junção entre os dois conceitos para a obtenção de uma nova linguagem que atenda ambas necessidades (XML + HTML5 = XHTML5). Talvez essa seja uma boa solução.
O XHTML se mantém fiel a proposta inicial do HTML, que é a de estruturação do conteúdo. Infelizmente essa proposta foi alterada com o passar do tempo. O conteúdo da web deve ser priorizado, por isso os webstandards não podem se basear somente nas necessidades do mundo comercial, mas sim em criar uma web universal, disponível para todos independente de dispositivos de acesso ou deficiências do usuário.
Não se preocupe com sensação do momento, se preocupe com a web. Essa é a idéia dos web standards.
Referências:
- 1º Café com Browser Opera W3C Brasil - "Os mais novos padrões e funcionalidades da web" - Charles McCathieNeville, Diretor de Standards do navegador Opera
- Qualificando a Web
- Evangelizando padrões
- Pensamentos como ondas relacionado com Web 3.0
Quando declaramos posição relativa ( position: relative ) não acontece nada no posicionamento do elemento, mas quando incrementamos as propriedades top, right, bottom e left o elemento de movimenta apartir da sua posição inicial até o respectivo valor definido.
As propriedades right e left são destinadas a controlar o elemento no eixo X, respectivamente as propriedades top e bottom controlam o elemento no eixo Y.
Exemplo:
XHTML
CSS
Teste essa parte do código e veja que estão normais as divs.
Agore declare as seguintes propriedades e valores para a div#dois:
Veja que o resultado é que a div#dois sai da sua posição inicial até a distância definida pelo top e left, mas perceba que seu espaço aonde ocupava é preservado.
Como na imagem seguinte:
O bom é que essa forma de trabalhar com posicionamento relativo não importa se o elemento é bloco ou inline, qualquer forma renderiza igual.
Créditos:
- Livro Maujor - Conteúdo baseado do livro Construindo Sites com CSS e XHTML (12.1.1.3)
Junto com os amigos do trabalho estamos sempre buscando uma forma interessante de documentar nossos padrões. A idéia começou quando o Carlitos criou alguns pdfs de Checklist para desenvolvimento XHTML e CSS. Para abranger mais o pessoal de tecnologia criou uma wiki para que todas equipes colocassem seus padrões, dicas e soluções. Só que acabou não dando muito certo... Então resolveram usar o Vanilla, é um sistema de fórum e que deu muito certo e ainda está online e funcionando, mas só que é restrito. O problema é que a gente não sossega em quanto só ajudamos "nóis" mesmos, por isso após alguns probleminhas com servidores que até passo pela cabeça a possibilidade de perder todas nossas documentações que então veio uma luz! Por que a gente não faz um blog só nosso com os nossos padrões? Eu tinha um domínio que comprei faz um tempo com a intenção de fazer um blog comunitário sobre web standards, então porque não usar ele?
Criamos um blog sobre web standards aonde o tema é: web standards, XHTML, CSS e soluções de problemas no dia-a-dia.
Em parceria com Lincoln, Carlitos, G4 e Eu.
A idéia do blog não é ficar discutindo e mostrando como foi a palestra do Picachu na Campus Party mas sim apresentar como nós resolvemos nossos problemas como equipe.
Acompanhe por feeds, veja nosso blog sobre web standards!
Geralmente temos que declarar a propriedade float para alguns elementos, só que precisamos que o elemento pai ( container ) expandisse dependendo do conteudo do elemento que tem float.
Sua forma de resolver isto ainda é usar um div.clear, br.clear, hr.hide ou algo do tipo? Legal. Eu também usava isso :( , o texto a seguir apresenta algumas opções um pouco mais interessantes.
Já estão disponíveis faz um bom tempo mas nunca falei nada aqui no blog, aliás falei até coisa que não devia..
Médoto com overflow.
Exemplo, escreva o HTML seguinte:
Declare o seguinte CSS para o HTML:
O resultado será:
Acrescente a propriedade overflow ao elemento pai ( nesse caso, o ul ):
Atenção! Caso o elemento pai tenha alguma largura ( width ) não será necessário o código seguinte. Mas se o elemento não tiver largura definida adicione o seguinte código para o Internet Explorer 6.
Agora sim, tudo ok.
Esse é um método legal. Sempre uso esse quando não posso usar o proximo método que vou apresentar ( que eu acho bem mais prático ).
Médoto com class="contemfloat"
Use o mesmo HTML só removar todo o CSS do exemplo anterior.
Copie o códido CSS abaixo e cole em seu arquivo de estilos.
agora só defina a class no HTML:
Esse método foi inventado por Tony Aslett. Tem gente que não gosta, mas eu uso praticamente todos os dias e sou uma pessoa feliz.
Como ninguém é dono da verdade e todos cometem erros, eu preciso me redimir pela falta de conhecimento e cabeça dura ( leia também como: "Universitário de merda e chato" ). Esse post é um tema pouco que polêmico ( pelo menos já foi... ), então caso seja contra esses métodos ou tenha alguma opinião comente o post. Precisamos aprender juntos, cada um contribuindo com seu conhecimento a fim de chegar a uma web com seu potencial máximo !
Desculpem, mas eu não conhecia o esquema do contemfloat e nem do overflow antes de entrar na Mídia Digital. É que eu via no site da mozilla os códigos com hr e ai pensava que era o correto, não que seja errado, mas é que não é muito legal usar hr.
Mas então é isso, valeu galera, té!
Me desculpem leitores paulistas, mas São Paulo foi uma loucura. Minhas raizes de cidade pequena (Curitiba em relação a SP) não me largaram durante a visita a a uma cidade quase dez vezes maior. Eu Fiquei + - umas 4 horas dentro de trem e metrô, sem falar que parece que as pessoas tem medo de você ou você tem medo delas, algo meio estranho. Bom seria se o W3C fosse aqui em Curitiba.
Apesar de ter passado pela doidera de SP valeu muito ir no 1º fórum W3C Brasil. Mas então, chega de falar de São Paulo...
No fórum recebemos alguns papéis, folhetos, cartilhas, cd, mapa do prédio, crachá e essas coisas que sempre dão em eventos. E comidinhas também muito boas! Foi xique, muita gente de terno com notebook, macbook e com direito até a tradução simultanea em fone sem fio da palestra em inglês.
Quase todo o conteúdo esta disponível online. Aqui no blog tem um post com alguns links de conteúdo que o W3C Brasil dispõe em seu site e que também foram disponibilizados no fórum.
No site do CGI, tem alguns textos que também estão no cd que foi dado no evento.
O conteúdo desse cd é o seguinte:
- Cartilha de Segurança para Internet - Versão 3.1
- Pesquisa sobre o uso das tecnologias da informação e da comunicação no Brasil - 2005, 2006 e 2007
-
Videos antispam.br
- Epidódio 1 - Navegar é preciso
- Epidódio 2 - Os Invasores
- Epidódio 3 - Spam
- Epidódio 4 - A defesa
- Tutorial DNSSEC
- Sobre o CGI.br / NIC.br
- CGI.br: por uma Internet brasileira cada vez melhor
Caso alguém tenha interesse em ter esse cd, pode me mandar um e-mail com o endereço para que eu possa envie uma cópia.
Afim não apenas de seguir web standards mas também de ajudar na sua criação, apresentaram uma wiki com lista de discussão que será para membros filiados e também para colaboradores. O objetivo é criar e documentar conteúdo relevante a nós e também ao W3C internacional.
O problema é que ela ainda está em homologação, mas acredito que logo será lançada. Estou no aguardo!
Mas é isso galera! Vejam mais sobre o fórum no blog do Carlitos!
Prezado Sr. Gustavo Krause,
O Comitê Gestor da Internet no Brasil, o Núcleo de Informação e Coordenação do Ponto BR e o W3C Brasil têm a honra de convidá-lo para participar do 1º Fórum W3C Brasil - Por uma Web Única.
Este Fórum tem o objetivo de iniciar um série de discussões sobre a web de hoje e seu futuro.
PROGRAMAÇÃO
- 09:00 - Painel de abertura com os afiliados Brasil - "Os padrões web e seus impactos no futuro da governança da TI"
- 11:00 - Convidado internacional: - "The ways to Web Semantic" - Klaus Bierkenbihl, coordenador dos escritórios internacionais do W3C
- 11:45 - Convidado especial - "A Web Semântica no Brasil" - Hugo Hoeschl, presidente da ABEP
- 12:15 - Debate sobre a atuação do W3C Escritório Brasil
Aguardamos sua presença dia 30 de setembro de 2008...
Infelizmente o evento será apenas para os convidados. Felizmente, fui convidado!
A Mídia Digital com sua preocupação com web standards, teve a maravilhosa bondade de liberar eu e o Carlitos para estarmos presentes no evento. Agradeço muito a Mídia Digital, valeu mesmo!
Por uma Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! 1º Fórum W3C Brasil: Por uma Web Única. Aqui vamos nós!
O W3C Brasil disponibiliza em seu site uma seção de divulgação com vários videos, pdf, imagens, apresentações e guias para download.
Segue alguns links para alguns documentos.
Guia de referência
- Guia de Boas práticas em Web Móvel
- Um guia de Boas práticas em Web móvel, que resumem as informações do documento Boas práticas em Web móvel 1.0. As cartelas são úteis para recordar os sessenta itens explicados em detalhes nas especificações. Disponível também em PDF.
Institucional
Folder institucional sobre a missão, objetivos e definições sobre o W3C.
Videos
Vídeo de Tim Berners-Lee para o lançamento do escritório Brasil do W3C
Veja mais no site do W3C Brasil!
Na Mídia Digital, por questões de compatibilidade entre os navegadores, nos adotamos como padrão a unidade de medida "em".
"em" é uma medida relativa, isso quer dizer que ela toma como base um valor de referência anteriormente definido.
As quatro unidades de medida relativa que existem são: %, em, ex e px.
Tá mas vamos para a prática!
Escreva em um arquivo html, as seguintes marcações:
Dentro do body
Dentro do head
Explicação:
html e body é ".68em".
A o tamanho da fonte padrão dos navegadores é 16px, então pegamos 11px, que é o valor que queremos, e dividimos por 16px
11/16 = 0.68
11px é igual a 0.68em de 16px. Endendeu?
A lógica é essa! Pegamos o valor que queremos e dividimos pelo valor relativo(um valor de referência que foi definido anteriormente, apenas para lembrar).
x/(valor-relerência) = (valor-que-desejamos).em
Então, quais são os valores dos elementos do html acima. h1, p e strong?
| elemento tag | cálculo para restaurar o valor em pixel. | valor aproximado(~=) |
|---|---|---|
| h1 | 1.45(em) * 11(px) | 16px |
| p | 1.1(em) * 11(px) | 12px |
| p strong | 1.16(em) * 12(px) | 14px |
O layout que montado com essa medida é conhecido como layout elástico, por causa deste comportamento relativo entre as medidas, sejam elas font-size, width, padding, etc. Essa é uma simples explicação sobre essa medida. Veja também o blog do Carlitos, ele entende bem sobre o assunto. Experimente usar também!
Links
Publicado em um endereço para testes, a versão traduzida para português do Validador CSS, graças ao colaborador Maurício Samy Silva.
"Muitíssimo obrigado pelo seu maravilhoso trabalho", Olivier Thereaux do W3C
A versão traduzida do validador se encontra em http://qa-dev.w3.org:8001/css-validator/ e a listagem das traduções disponíveis está em: http://qa-dev.w3.org:8001/css-validator/translations.html
Apelo do W3C:
"Não hesite em usar a ferramenta no seu endereço de testes e procurar por erros de grafia ou de tradução."
"... o W3C colocou a tradução em um endereço provisório para testes... se você encontrar algum erro de grafia ou de tradução, por favor mandar um e-mail para: maujorcss[arroba]maujor[ponto]com"
Links
Parte do texto no blog do Maujor, link Permanente.
Tableless significa realmente sem tabelas, contudo Padrões Web não é e nem nunca foi desenvolver sites sem usar tabelas. Associar o nome Tableless aos Padrões Web é um erro altamente nocivo ao aprendizado. Tabelas são perfeitamente legais em marcações seguindo as recomendações do W3C, pois o elemento
TABLEtem o valor semântico de "apresentar dados tabulares" e não deve nunca ser substituido porDIV, um elemento sem valor semântico, quando se trata de apresentar dados.
- Portanto: Fora o termo Tableless do jargão Web Standards!
- À propósito: Vida longa para o sites do Élcio e Diego:
Maujor
Eu concordo totalmente!
Amigos!
Recomendo
