Esta é minha lista de artigos com a tag "XHTML"

Charges.com.br com novo layout e muitas novidades

Por: Flávio Theruo KaminisseThursday 10 August 2006 às 1:29 PM

Como fiz no meu segundo artigo neste blog, Novo Layout do Charges.com.br, estou aqui novamente para falar do novo layout do Charges.com.br.

Novamente fiz parte da equipe de desenvolvimento do site, o Henrique ficou responsável pelo XHTML e CSS, e eu fiquei responsável pela programação.

Tirando o novo layout, podemos destacar o uso de AJAX (Asynchronous JavaScript And XML) em muitos locais, dentre eles a navegação da capa, onde você pode acessar as charges sem sair da página principal, a votação, tanto na enquete, quanto nas notas das charges também utilizam AJAX (Asynchronous JavaScript And XML).

Estarei falando de mais alguns detalhes e tentarei escrever mais sobre AJAX (Asynchronous JavaScript And XML) em breve, por enquanto ficarei só neste pequeno artigo, agradecendo desde já ao Maurício pelo apoio e paciência, ao Henrique, e à Webroom.

Webinsider 2006! Novo layout e muitas novidades

Por: Flávio Theruo KaminisseWednesday 12 July 2006 às 8:26 PM

Tenho o prazer de anunciar que o novo site do Webinsider está no ar. Foi um projeto longo que eu (como parte da equipe da Webroom) tive o prazer de desenvolver. O Henrique ficou responsável por toda a parte do design, XHTML e CSS. Eu fiquei responsável pela integração do novo código com o WordPress e por toda a migração dos milhares de artigos antigos. Neste texto vou apresentar alguns detalhes interessantes na produção no novo site do Webinsider.

Foram longas as conversas entre o Vicente Tardin (editor e criador do Webinsider), o Henrique e eu, para tentarmos deixar o Webinsider com um código moderno e semântico, sem perder nenhuma de suas antigas funcionalidades, e acima de tudo adicionando novas funcionalidades. Particularmente, gostei muito do resultado final, apesar de ter dado muito trabalho, principalmente para transformar o WordPress (para mim o melhor sistema de gerenciamento de blog) num sistema capaz de gerenciar um site institucional com várias peculiaridades.

Dentre as novidades e facilidades já implementadas pelo WordPress, posso citar a possibilidade de comentários nos artigos, o que deixa ainda mais dinâmica a interação entre os leitores e o responsável pelo artigo, pois assim o feedback do leitor fica registrado e novos pontos de vista são geralmente muito válidos, tanto para o responsável pelo artigo, quanto a outros leitores, o que na minha opnião, deixa um conteúdo que já é excelente ainda melhor.

Outra novidade, que também já é implementada pelo WordPress, são as tags, ou melhor dizendo, folksonomia, pois agora cada artigo tem as suas palavras chaves, o que facilita a navegação dos leitores no momento de buscar textos relacionados. Neste ponto devo fazer uma ressalva, pois além de termos as tão famosas tags, temos também as seções dos artigos, ou seja, cada artigo tem uma seção, ou melhor dizendo, uma categoria em que ele se encaixa e ainda possui várias tags que relacionam o texto com outros artigos. Mas como implementar estas duas funcionalidades tão semelhantes e ao mesmo tempo tão distintas? Falando a nível de código, eu poderia ter criado outra tabela onde teríamos as categorias, mas daí eu teria que criar todo o gerenciamento destas categorias, o que seria replicação de trabalho, então optei por dividir as ja existentes tags do WordPress em dois grupos, criando assim um grupo para as categorias e outro para as tags, não sei se foi a solução mais limpa, e/ou a melhor solução, mas está funcionando e atendendo às necessidades.

Outro aspecto interessante é a possibilidade que o WordPress traz de gerar páginas de buscas por autor, ou seja, podemos criar páginas que listam os últimos artigos de cada autor, deixando simples a busca por determinadas matérias de um autor específico, no meu ver torna muito simples acompanhar as últimas matérias de seu autor favorito, não precisando que este seja um colunista, pois todos os que escrevem ou escreveram para o Webinsider possuem uma página personalizada.

Outro aspecto interessante é a navegação, pois a medida que a pessoa vai navegando nos artigos ela sabe exatamente a qual categoria determinado artigo pertence, facilitando a localização de outros artigos da mesma categoria, bem como a página de cada categoria, que contém todos os artigos daquela categoria.

Outro aspecto que também achei bastante interessante, foi a parte dos banners, o Vicente queria que os banners pudessem ser escolhidos por seção, ou seja, na seção de Tecnologia pudesse ser colocado apenas banners relacionados a Tecnologia, e assim por diante, ficando o banner num local interessante ao público, admitindo estes requisitos, fui procurar um plugin de gerenciamento de banner que pudesse se enquadrar nestas caraterísticas, é claro que não encontrei um plugin tão específico, sendo assim instalei o melhor plugin de banner que encontrei e fiz algumas alterações no código para que este pudesse satisfazer tais necessidades, foi bastante trabalhoso, mas acho que o resultado foi muito bom.

Agradeço a Webroom por ter permitido a minha participação neste projeto, ao Vicente pela compreensão em vários pontos críticos do projeto, pois, tentamos solucionar os problemas de uma forma que não ficasse tão dificil de ser implementado e pensando sempre no leitor, ao Henrique por ter feito um código limpo, fácil de ser alterado e pela paciência ao discutirmos certas funcionalidades.

Espero que tenham gostado do novo Webinsider, pois como já disse, eu gostei muito, fica aberto este canal para dúvidas, sugestões, críticas, e é claro, para elogios também.

O mime-type do Japs agora é application/xhtml+xml

Por: Flávio Theruo KaminisseTuesday 28 March 2006 às 1:31 PM

Aproveitando os estudos realizados no último post sobre content negotiation, e um pequeno empurrãozinho do Henrique, resolvemos utilizar o script do artigo anterior e deixar que todas as páginas XHTML fossem enviadas como application/xhtml+xml.

É verdade, agora todas as páginas do blog são enviadas como application/xhtml+xml, como já falei no post anterior, existem alguns riscos de se enviar páginas assim, principalmente em um blog que é bastante dinâmico, mas resolvi correr este risco e experimentar.

Fiz uma verificação de todos os artigos, tive que ajustar algumas coisas, mas a migração foi tranquila, estou utilizando o plugin X-Valid: XHTML validifier, e logo estarei dando minhas opniões sobre o mesmo.

Até o Google Adsense está funcionando corretamente, falo assim porque o Google utiliza um iframe para exibir seus anúncios e uma chamada document.write(), que não funciona em xml e graças ao post seguindo à risca os padrões, arrumei o script e esta tudo funcionando.

Mais detalhes sobre application/xhtml+xml podem ser lidos no artigo mudei meu mime-type e também no artigo XHTML Media Types.

Algumas pessoas me escreveram falando de problemas no uso de acentos em arquivos JavaScript quando se utiliza a codificação UTF-8, o Alessandro escreveu o artigo problemas com caracteres em JavaScript que mostra como resolver este problema, vale a pena a leitura.

Espero que entendam qualquer erro que possa aparecer nas páginas XHTML do blog, fiquem tranquilos que estarei arrumando o mais rápido possível.

Content Negotiation

Por: Flávio Theruo KaminisseSaturday 25 March 2006 às 11:07 AM

Nestes últimos dias, andei lendo bastante sobre um assunto que despertou bastante minha curiosidade, vou descrever o pouco que entendi sobre este assunto, o qual, achei muito interessante, caso eu cometa algum erro, sinta-se a vontade para corrigir, pois ainda estou aprendendo.

O assunto deste post é content negotiation, mas afinal de contas, o que é content negotiation?

Content negotiation é a forma como o servidor, no caso de PHP rodando em ambiente Linux, Apache, negocia com os user agent (Browser, Mecanismos de busca, e outros) a requisição de cada documento, nesta “negociação” o user agent informa quais media types (também chamado de content type e MIME type) ele pode interpretar. Um exemplo prático: No caso de você possuir duas imagens iguais, uma GIF e uma PNG, alguns browsers, como é o caso do ie, não interpretam PNG, então o user agent browser, fala para o servidor quais tipos MIME ele pode interpretar, então o servidor ao invés de enviar a imagem PNG, envia a imagem no formato GIF, pois é um formato que o user agent pode interpretar corretamente.

Em suma, o user agent anuncia quais MIME ele pode interpretar no header da página e envia para o servidor, este header especificamente é chamado de Accept, um exemplo do header Accept do Firefox é:

Accept: text/xml, application/xml, application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png, image/jpeg, image/gif;q=0.2, */*;q=0.1

Agora que todo mundo já sabe o que significa content negotiation, vamos ao verdadeiro propósito deste post, que além de descrever um pouco do que é content negotiation, tem como objetivo falar um pouco sobre um MIME específico que é o application/xhtml+xml, pois não sei se todos sabem, mas documentos XHTML, podem utilizar o MIME application/xhtml+xml, mas o único problema é que nem todos os browsers suportam o MIME application/xhtml+xml, como vimos no exemplo acima, o Firefox aceita este MIME, já o ie não.

Mas e se por um acaso eu quiser enviar meus documentos XHTML com o MIME application/xhtml+xml? Eu não posso?

É claro que você pode, mas se você enviar as páginas diretamente com MIME application/xhtml+xml, o ie não vai nem abrir sua página, então quer dizer que eu não posso utilizar application/xhtml+xml em meus documentos!

Poder você pode, mas antes disso você tem que utilizar um pequeno trecho de código para que funcione corretamente em todos os browsers, e por exemplo o ie consiga acessar sua página sem problemas, vou apresentar agora um pequeno trecho de código para que este problema seja resolvido, lembrando que este trecho de código foi retirado de uma de minhas referências.

<?php
if ( stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml" ) ||
     stristr($_SERVER["HTTP_USER_AGENT"], "W3C_Validator" ) ):
    header("Content-Type: application/xhtml+xml; charset=utf-8");
    header("Vary: Accept");
    echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
else:
    header("Content-Type: text/html; charset=utf-8");
    header("Vary: Accept")
endif;
?>

Basicamente o que este trecho de código faz é, caso o user agent aceite em seu MIME application/xhtml+xml, ou o user agent seja o W3C HTML Validator, o documento será enviado como application/xhtml+xml, caso o user agent não aceite, o documento será enviado como text/html.

Montei dois exemplos somente para mostrar o que acontece no caso de um MIME sendo enviado como application/xhtml+xml diretamente e outro sendo tratado com o exemplo que apresentei. A primeira página que envia o MIME como application/xhtml+xml diretamente pode ser acessada aqui, já um segundo exemplo que trata o MIME pode ser acessada aqui. Quem quiser baixar o primeiro exemplo basta clicar aqui, e o segundo exemplo aqui.

Um benefício ao se enviar o MIME como application/xhtml+xml, é que você nem precisa ficar validando seu site através do W3C HTML Validator, pois browsers como o Firefox, que são baseados no engine Gecko, mostram mensagens de erro e warnings, caso seu documento não seja válido, em contrapartida se pensarmos em um blog, e imaginarmos que a área de comentários é livre e nem todos precisam saber todas as regras de validação da W3C para postar em seu blog, caso algum comentário apresente algum erro, sua página ficará exibindo este erro até que o administrador do blog edite e arrume todos os erros e warnings, isso não é muito bom.

Existem plugins para o wordpress que analisam os comentários para testar qualquer tipo de erro e corrigi-los, mas nunca usei, e não sei da eficiência destes na correção.

Por enquanto é só isso, quem quiser saber mais sobre o assuto, pode visitar os endereços que usei como referência para este artigo, peguei um pouco de idéia de cada um, alguns trechos podem estar até bem parecido, mas tentei ao máximo explicar com minhas próprias palavras, vale acessar estes artigos, pois apresentam outros exemplos de modificação do MIME para application/xhtml+xml em outras linguagens e muitas outras informações:

Content negotiation | 456 Berea Street

Content Negotiation @ The Autistic Cuckoo

Keystone Websites: Serving up XHTML with the correct MIME type

X-Valid: XHTML validifier

Vou estudar mais e quem sabe num próximo artigo, aprofundar mais nestes e em outros assuntos semelhantes.

Como eu já disse no início do post, caso eu tenha cometido algum erro, fique a vontade para corrigir, criticar, dar idéias, e explicar melhor algum trecho que tenha ficado meio obscuro, pois como ja disse, estou aprendendo.