Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Depois do ISBN, agora é a vez do IBSN (Internet Blog Serial Number). Abaixo você pode ver o meu:

Quer colocar um no seu blog? Então gere o seu aqui.

A maior dor de cabeça de todos os desenvolvedores com certeza é o uso de hacks em CSS, por culpa de um navegador que não interpreta o código de forma correta (vulgo IE). Uma das dores de cabeça mais conhecidas são as Margens duplicadas, e em certas ocasiões você tem que usar padding ao ínvés de margin, sem nehuma razão, tudo por causa do nosso amigo IE.

Hoje em dia existem muitos hacks, é só você dar uma procurada no Position Is Everything, que você vai encontrar muitos deles, e quem saber uma solução para o seu problema não pode estar lá. Mas vamos dizer que você já tentou de tudo e ainda não encontrou a solução para o seu problema. Ainda resta um último recurso: O Hack do seletor universal.

* html

Continuar lendo »

A cada dia eu me surpreendo com o que as CSS são capazes de fazer, dando uma olhadinha por aí, descobri um efeito de raio-x com CSS, é usado basicamente a propriedade background-attachment do CSS2. Basicamente são usadas 3 imagens na mesma posição, e as CSS se encarregam de fazer a mágica. Você pode dar uma conferida no efeito aqui.

Atenção: No IE o efeito não fica correto, agora no Opera, Firefox e Safari ele fica OK

Você acabou de construir o seu site inteirinho no bloco de notas, o código está todo uma beleza, lindo de se ver, as tags estão todas aninhadas corretamente, mas você vai fazer um teste no seu browser e a página não fica como você queria, e agora? Meu deus, não precisa sair arrancando os cabelos ou enviando e-mails desesperadamente para aquele seu amigo me manja bastante de HTML, você pode ter simplesmente esquecido de colocar um DOCTYPE válido na sua página.

Mas a troco de que eu vou usar isso na minha página?

De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versã do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página. Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.

Continuar lendo »

O XHTML, ou seja, Extensible HyperText Markup Language, é a evolução do HTML, e foi criado dentro do conceito do XML, linguagem de marcação onde você cria suas tags e atributos para criar um documento Web, e nada mais é do que eu um HTML mais claro e limpo. Veja abaixo algumas diferenças entre o HTML e o XHTML:

• Todas as tags e atributos devem ser escritas em letras minúsculas
• Todas as tags devem ser aninhadas corretamente
• Todas as tags devem ser fechadas, por exemplo o <br> e o <hr>, agora elas ficam assim: <br /> e <hr />
• Todos os atributos devem ter aspas
• Agora ao invés de “name” você deve usar “id”
• Ao invés de usar, por exemplo: “input checked”, deve-se usar, “input checked=”checked”

Quais são as vantagens?

• Compatibilidade com futuras aplicações
• Código consistente
• Tempo de carregamente da página extremamente menor
• Compatível com todos os navegadores

Ontem tive a oportunidade de participar de uma palestra de Roque Fernando, instrutor do Instituto Impacta. A palestra era sobre “Web Standards, Tableless e Usabilidade. Os novos rumos da Web”. A palestra em si foi muito boa, ele falou sobre todos os asuntos do momento, como a Web está mudando as nossas vidas, a Web 2.0, antigamente você tinha sites estáticos, agora você tem sites dinâmicos, proporcionando uma nova experiência na navegação.

Ele também procurou dar dicas na hora de você construir um site, como seu site deve ser simples e objetivo, vá direto ao assunto, seu usuário deve ficar á vontade, não adianta você construir um site que agrada somente a você, seu site deve agradar a todos. Consistência demonstra confiança, procure entender o comportamento do seu público alvo.

Ele citou também as vantagens e desvantagens de se usar AJAX, falou sobre dispositivos móveis e também que o Flash Player, que antes era somente usado na Web, agora é também usado em dispositivos móveis, como exemplo o GPS de um carro, ou até mesmo um celular. Para aqueles que querm saber sobre palestras da Impacta, é só estar visitando o quadro de eventos.

Graças a esse Microformato podemos votar, “positiva ou negativamente”. A forma de usar esse Microformato é muito simples, como em todos os outros, você deve colocar um certo valor em cada atributo que deseja marcar, e nesse caso, o atributo a ser marcado é um hyperlink, e o atributo que usaremos será rev (antigamente se usava rel, mas acabou caindo em desuso, pois não refletia corretamente a relação do link com o documento linkado).

Os valores que podem ser usado nesse Microformato são os seguintes:

rev=”vote-for”

Esse valor deve ser usado quando queremos dar um “voto” positivo ao link que marcamos. Quando damos um voto positivo estamos dizendo que estamos de acordo com a página que linkamos.

rev=”vote-abstain”

Quando marcamos um link com esse valor, não estamos votando nem positivamente, nem negativamente, só estamos indicando que não estamos de acordo com o que está descrito na página.

rev=”vote-against”

Marcando com esse valor, estamos indicando que não estamos de acordo, que não recomendamos, estamos dando um voto negativo

Ficou confuso? Vou citar aqui alguns exemplos para vocês entenderem melhor:

<p><a href="http://www.carloscardoso.com/quantovale/" title="Quanto vale seu site" rev="vote-for">Quanto vale seu site</a></p>
<p><a href="http://www.tableless.com.br/r-100000-jogados-fora" title="Artigo de Diego Eis sobre a Embratur" rev="vote-abstain">R$ 100.000,00 jogados fora</a></p>
<p><a href="http://www.alt1040.com/archivo/2005/09/19/algunos-pensamientos-sobre-comentarios-en-los-blogs/" title="Artígo de Eduardo Arcos sobre a concepcição dos comentários em blogs" rev="vote-against">Alguns pensamentos sobre os comentários em <span xml:lang="en">blogs</span></a></p>

Como podem ver eu marquei os 3 links, usando o atributo rev para marcar minha opnião sobre cada um deles. No primeiro link de Carlos Cardoso, marquei que sou a favor.

No segundo, o artigo de Diego Eis, do Tableless, eu marquei que não sou contra e nem a favor.

E o último, um artigo de Eduardo Arcos, onde ele expõe sua opnião sobre os comentários em blogs.

Referências:

• Especificação do Microformato vote-links
• Extensão Semantic Links para Firefox para o uso desse microformato

Após um post do Google sobre a iniciativa para evitar o spam nos comentários, ficamos conhecendo o atributo dos Microformats rel=”nofollow”. Desde então, muitos blogs deram opniões a favor e outros contra, mas isso acabou passando despercebido. Nos dias dehoje, a essas alturas, acho que todos concordam com o uso do mesmo.

A função do microformato rel=”nofollow” serve para especificar aos user-agents (mecanismos de busca), que os links com esse atributo não devem ser seguidos pelos mesmos. Abaixo você pode ver um exemplo:

<a href="http://www.teste.com.br/" title="Página de Teste" rel="nofollow">Teste</a>

Como pode ver no exemplo acima, os buscadores (ex. Google), não poderá indexar o link em sua base e nem poderá gerar um ranking.

Referências:

• Microformats
• Atributo rel=”nofollow”
• Nonofollow.net

Como podem ver, resolvi dar uma mudada no visual do Blog, e aí, o que acharam? Depois de um tempo usando um template, resolvi botar a mão na massa e fazer algumas alterações, agora só falta dar os retoques finais, mas devagarzinho eu vou fazendo isso. Críticas e sugestões são bem vindas!!!

Microformats são especificamente formato de dados projetados especialmente primeiro, para serem interpretados pelos seres humanos, e depois pelas máquinas. Basicamente são meta-informações que auxiliam no enriquecimento do seu site, ou seja, organizar a informação com o máximo de precisão. A vantagem de se usar microformatos é que não é preciso usar metatags sendo que a infomação já está na pagina. Somente com as tags do HTML e XHTML você não conseguiria fazer isso devido as suas limitações.

Abaixo você pode ver as especificações dos Microformats:

• hcard - Pessoas e Organizações
• hCalendar - Calendários e Eventos
• hReview - Opniões, Ratings e Reviews
• XFN - Redes Sociais
• XMDP - XHTML Meta Data Profiles
• rel-license - Licenças
• rel-tag - Tags, Keywords, Categorias
• rel-nofollow - Um hiperlink com esse atributo não deve ser seguido pelos robots de busca
• XOXO - Listas e esboços
• VoteLinks - Sistemas de Votação

Referências:

• Microformats.org
• Microformats Wiki