Recently in CSS Category

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

• Tutorial Maujor
• Font size: the 'font-size' property

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

• http://qa-dev.w3.org:8001/css-validator/
• Post no blog do Maujor

Esse é o fim da era Dreamweaver, agora começou a era PSpad.

Por uma internet mais livre, produtiva e barata. Por que não PSpad?

PSPad é um editor gratuito. Você pode personalizar praticamente tudo que quiser. Não necessita de nenhum processo de instalação complexo. É só instalar e usar, e se quiser pode instalar várias extensões também. Suporta muitos tipos de arquivos e linguagens e ainda tem destaque de sintaxe.

PSPad possibilita trabalhar com macros, arquivos na área de transferência e modelos para automatizar tarefas repetitivas. Conta com um editor hexadecimal integrado, suporte a projetos, cliente FTP, gravador de macros, recursos de busca/substituição de arquivos, explorador de códigos, conversão de páginas de códigos e muito mais."

Sabe aquela história de um mundo com software livre? Então, é essa...

Veja a tabela de comparação:

Editores	PSpad	Dreamweaver CS3
Espaço	9.27MB	1GB
Idiomas	18 idiomas mas, é multilanguage	14 idiomas
Sistema operacional	XP/2000/ME/9x/Vista/2003 ou até em Win95	XP SP2, Vista™ Home Premium, Business, Ultimate, ou Enterprise e Mac OS
Memória	256MB	512MB
Processador	350MHZ	Processador Intel® Pentium® 4, Intel Centrino® Intel Xeon® ou Intel Core™ Duo (ou compatível)
Preço	100% FREE	R$ 850,00

• Site: http://www.pspad.com/
• Faça Download do PSpad!

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 TABLE tem o valor semântico de "apresentar dados tabulares" e não deve nunca ser substituido por DIV, 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!

Recentemente o Gonçalo, professor da faculdade Opet, pediu para eu dar um palestra para os alunos dele. Foi um processo de evangelismo dos Web Standards.

Alguns dos tópicos da palestra foram os seguintes:

• Desenvolvedor analfabeto
• WYSIWYG
• W3C
• Tecnologias interoperáveis
• Linguagens de marcação
• WAI
• Linguagem de formatação
• Web semântica
• RDF

Os slides estão a seguir. Para navegar pelas telas use as teclas: espaço, esquerda e direita.

Disponível para download (arquivo exe).

Lista completa das organização que são membros do W3C e que participam no grupo de desenvolvimento do CSS.

Observação: faço link apenas com aquelas organizações que realmente levam a sério.

• Adobe Systems Inc.
• Antenna House, Inc.
• AOL LLC
• Apple, Inc.
• Betfair Limited
• Disruptive Innovations
• Google, Inc.
• HP
• IBM Corporation
• Indus Net Technologies
• INNOVIMAX
• International Webmasters Association / HTML Writers Guild (IWA-HWG)
• Microsoft Corporation
• Mozilla Foundation
• Openwave Systems Inc.
• Opera Software
• Sun Microsystems, Inc.
• Universidad de Oviedo

Link

• CSS working group

Vejam também o post do e-mail enviado para o Vagner Diniz, Gerente do W3C no Brasil. E descubra algo mais sobre padrões Web em relação ao Google e a Microsoft.

You can be proud of yourself!

XHTML

19 corretas em 8 minutos e 11 segundos.

CSS

19 corretas em 6 minutos 14 segundos.

É uma prova que contém 20 questões e não há limite de tempo.

Esse teste não é oficial, é apenas uma boa maneira de ver o quanto sabe, ou não sabe, sobre XHTML e CSS.

A sua pontuação é somada e receberá 1 ponto para cada resposta correta. No final do teste, sua pontuação total será exibida. O máximo é de possível são apenas 20 pontos.

Faça o teste, não é difícil!

Links

• XHTML Quiz
• CSS Quiz

Vários blogs públicam listas de extensões para o Firefox, e nestas listas gigantescas, algumas extensões são excelentes, mas outras você usa uma vez e se arrepende de ter instalado.

a minha lista é pequena, mas listo extensões que seu Firefox não pode ficar sem estas elas, são muito boas e você vai usar sempre.

Fundamentais

1. Web Developer - acho que é a extensão mais pop-star do Firefox. É uma barra de ferramentas que tem várias funções. Nem dá para explicar, só instalando e usando para ver.
2. Firebug - Tipo o Web developer, mas muito mais prático!
3. HTML Validator - um excelente validador de marcação, tem vezes que é até melhor que o Markup Validation Service
4. MeasureIT - uma régua
5. The Tabulator - Uma maneira de navegar na web por meio de inter-application com o padrão de dados RDF.
6. Semantic Radar - Barra de status que aparece um ícone indicando se a presença de Web Semântica(RDF) na respectiva página. E que possibilita ver quais são esses dados.
7. FOAFox - Descobre FOAF perfil na página.
8. Operator - leitor de Microformatos, com opção de interação com outros sites e também pode exportar dos dados. É muito bom, você começa achar ruim os site que não tem Microformats.

Interessantes

Mas não fazem parte do seu dia-a-dia.

1. View Source Chart - cria um gráfico colorido do código fonte de uma página.
2. Total Validator - validador de páginas.
3. Tails Export - para mostrar e exportar Microformatos.
4. Hyperwords - Ferramenta muito incrível. Fora do normal mesmo, essa é uma das melhores extensões. Entre no site do fábricante e veja o video de como é que funciona!

Links relacionados

• Firefox
• extensões para o Firefox
• Microformats

Essas lista de extensõe sestá em sempre sendo atualizada

Apesar de ser pequeno e simples, foi reconhecido, e está lá no CSS star[1]. E já tem até alguns votos!

Links

1. CSS star
2. WebKrause no CSS star

Conversa que eu tive com o grande amigo meu Bruno Blanke pelo Google Talk sobre:

• Web Standards
• XHTML
• CSS
• W3C
• Possível happy hour de padrões web

Não se preocupe com os elogios no decorrer do post.

Gustavo: o blanke

Bruno Blanke: fala

Gustavo: sabe a div clear, sabe qual é a forma correta.. eu vi no site da W3C.

Bruno Blanke: <br class="clear">

Gustavo: no HTML

Bruno Blanke: n sei, como?

Gustavo: <hr class="hide" />

.hide {
  visibility: hidden;
  background: #fff;
  color: #fff;
  clear: both;
  margin: 0;
}

Bruno Blanke: hmmm, massa mas, mesmo assim eu vejo como gambiarra e que os browser que tinham que se espertar

Gustavo: mas com <hr /> é a forma mais semântica né? e pq será que a W3C coloca

html, body {
  background: #fff;
  color: #000;
}

e coloca só com 3 e minusculo #fff, #FFFFFF, acho #FFFFFF mas massa..

Bruno Blanke: n sei a explicação, talvez carregue menos, fique mais leve

Gustavo: mas é por isso mesmo, é que os cara são fod.., eles fazem o melhor em cada coisa

Bruno Blanke: axo melhor #FFFFFF, isso é hexadecimal, HEXA, 6, n é tridecimal.

Gustavo: to ligado, mas ai entra o CSS pra simplifica, por um lado é bom

Bruno Blanke: n sei não, n sei se devemos seguir tudo que a W3C faz, carai

Gustavo: é aquilo q eu disse, os cara estraem o CSS, tudo que é auxilio que a linguagem disponibiliza..

Bruno Blanke: ainda axo <hr class="hide" /> errado, gambiarra, e n tem quem me tire isso da cabeça

Gustavo: tá parecendo um publicitario com a cabeça dura desse jeito...

Bruno Blanke: não é tu que é o xiita

Gustavo: to achando que vc quer fazer faculdade de publicidade e propaganda em! rsrsrs... Temos que seguir a W3C como a igreja! hahahaha

Bruno Blanke: é, vc é burro mesmo, em carai, igual a minha vó fala

Gustavo: e o site da W3C é a bíblia

Bruno Blanke: tem que ter fé em Deus e azar é das outras religiões.
A é, e o aucorão, n importa????

Gustavo: não existe outras religiões só a Web Standards

Bruno Blanke: então se não existisse outras religiões todos seriamos crentes?

Gustavo: e o Papa é o Tim berners lee

Bruno Blanke: ta, então vejamos assim

Gustavo: hm?

Bruno Blanke: qual o nome da mulé lá que começou o adventista?

Gustavo: sei la

Bruno Blanke: existia a igreja católica, que era lei e tudo que falavam era lei

Bruno Blanke: dai veio um tal de lutero e discordou de algumas coisas certo?

Gustavo: hm? Ai venho vc e discordo da W3C

Bruno Blanke: a W3C é a igreja católica, tudo que ela falar tem que ser lei

Gustavo: :)

Bruno Blanke: e n pode ser questionada é assim então?

Gustavo: agora vamos pensar assim.

Bruno Blanke: eu sou um herege então, tenho que ser queimado

Gustavo: Siga o meu pensamento, Eu sei que tem várias coisa que podem ser aprimoradas.. mas pense assim.

Gustavo: A W3C foi quem desenvolveu o XHTML, CSS, Web Semântica, XML, OWL, XSLT, etc. Eles são as pessoas que mais sabem sobre isso no mundo! Eu acredido e sei que existem coisas a serem aprimoradas, é por isso que sempre surgem novas versões de HTML, CSS, etc.

Por isso, acredito que no momento atual as melhores soluções para a Web estão relacionadas a propósta da W3C.

W3C não apenas Tim Berners-Lee e sua equipe, além disso são várias empresas que trabalham para chegar a uma solução boa para todos. Para "levar a Web ao seu potencial máximo".

Então se quiser melhor o seu XHTML e não usar mas a tag <hr class="hide" /> para tirar o efeito do float, sigamos!!!!!!!(envangelista) a W3C para que eles tenho muita grana e possam lançar uma versão nova de XHTML que seja ainda melhor, com muito mais semântica!

É como se fosse uma igreja que tem um bíblia como a wikipédia, onde sempre o que está lá , neste livro, é o mais atual e melhor. E se não for o melhor pode ter certeza que logo-logo será lançado algo novo ou aprimorado.

mas ou menos é isso...

Bruno Blanke: o problema da <hr class="hide" /> é dos browsers não da W3C, n acha isso?

n acha que a W3C n deveria ser mais xiita?

Gustavo: claro, mas é que não é apenas a W3C, depende de nós também! vc viu o post do e-mail para o gerente do W3C

Bruno Blanke: Se ta virando político mesmo, carai

Gustavo:

Mas é uma questão só de tempo até entenderem que com padrões todos ganham.
O tempo pode ser longo ou mais curto. Depende de nós."

Vagner Diniz

Bruno Blanke: enquanto isso usamos gambiarra mesmo?

Gustavo: isso foi o que o cara falou e eu assino em baixo. Essas "gambiarras" são as únicas disponíveis no momento...

Bruno Blanke: eu discordo, senão a W3C ta relaxando

Gustavo: Mas não é gambiarra o hr

Bruno Blanke: claro que é, n é semântico porr..., pensa bem, pra que serve uma linha?

Gustavo: para separar, ou para limitar, contornar..

Bruno Blanke: eu to cansado de escrever, depois discutimos ao vivo que dai eu posso te bater

Gustavo: mas assim a gente pode guardar a conversa e disponibilizar para que outras pessoas possam aprender

Daqui pra frente muda um pouco a conversa, e vamos usar um <hr /> para separar...

---

Bruno Blanke: qq tu acha de organizarmos um happy hour de padrões web? E chamar os caras de agências de curitiba? Nada melhor pra evangelizar certo?

Gustavo: Certo, é por isso que a gente tem saber o que evangelizar... estar do lado dos padrões, não deixar que qualquer um passe o rodo em nós o "baguinho" é esse! Envagelismo! Web Standards ou queima todos os servidores e ninguém usa a internet. assim estou sendo muito mal.

Bruno Blanke: tu vai participar certo? vamos marcar essa semana ainda o Diego tem uns contatos

Bruno Blanke: sexta-feira às 19hrs, o Diego ja ta ligando pros caras, dai eu posto nos grupos

Gustavo: Vamos criar o novo período a inquisição dos Web Standards! hahahaahahahahahahahahaha(risada do mal...rsrsrs)

pera pia

Bruno Blanke: pera nada

Gustavo: vamo planejar melhor carai

Bruno Blanke: ta com medo porra, vai tomar no C, qq tu ta falando nde planejar, Natali do carai

Gustavo: ai a gente marca e só tem coisa paia pra falar.. ficar falando de código.. eu não sou tão burro assim..

Bruno Blanke: quanto tempo tu acha? pra planejar

Gustavo: não sei, tenho que planejar também......hahahaa

Bruno Blanke: planejar pra planejar

Gustavo: planejar para pegar o cara com as calça na mão

Bruno Blanke: sexta que vem, ta bom, quinta que vem, dai conversamos esse fds, nós 2, beleza? E planejamos bastante, pode ser?

Bruno Blanke: pode ser, mas tu é afim né carai?

Gustavo: Estou muito! Mas,,, tem que estar preparado.

Bruno Blanke: a bom, isso que eu queria ouvir, "Estou muito!"

Gustavo: Tudo que é na loca... Entra na boca....e vai pro estomago e depois vira bosta... Que podre

Gustavo: Blz, entao blanke , depois a gente conversa.

Bruno Blanke: beleza, ve ai que dia podemos nos encontrar pra discutir beleza? e dai me fala, ok?

Gustavo: certo.

Links

• W3C