Pinceladas da WebTutoriais sobre: XHTML, CSS, JavaScript e WebStandards

Olá caros amigos leitores do Blog Pinceladas da Web. Gostaria primeiramente de me apresentar me chamo Guilherme Zazu Simões mais conhecido por Zazumaster, fiquem a vontade para assim me chamarem. Como primeiro post aqui no blog gostaria de compartilhar um documento que considero de extremo importância e que me foi repassado gentilmente pelo amigo Pedro Neto, companheiro de trabalho.

Todos sabemos que conhecer as tags HTML e suas funções e pré-requisito básico para qualquer pessoa que queira ingressar no desenvolvimento de projetos web. Tendo em vista esta necessidade e o cenário em que estamos me vejo na obrigação de compartilhar este documento que mais uma vez repito: é de extrema importância para todos.

Trata-se de um Guia de Referência XHTML disponibilizado pelo pessoal do CGI na edição número 10 do FISL, espero que façam bom proveito. Em suma é isso galera espero que o material seja útil, vamos compartilhar o conhecimento para continuar evoluindo . Um forte abraço a todos obrigado.

Segue o link para download do Guia de Referência XHTML: Guia de Referência XHTML

O W3C tem a missão de levar a World Wide Web para o seu pleno potencial através do desenvolvimento de protocolos e orientações que assegurem o crescimento a longo prazo da web, e hoje foi lançado uma versão beta do redesign do seu site.

Analisar o código HTML e o CSS é uma boa aula de boas práticas e semântica, e por falar em boas práticas, aproveitem para dar uma olhada no CSS, vejam que ele é todo inline as propriedades são declaradas em linha, muita gente fala que escrever CSS dessa forma é perda de tempo, mas eu particularmente só escrevo CSS dessa forma e aconselho vocês a segui-la também.

Abaixo você pode ver um vídeo com as partes chave do redesign do site do W3C:

Mais informações: W3C Q&A Weblog.

Fiz um código super simples, para deixar qualquer (X)HTML ou CSS em uma única linha, sem tabs e sem comentários.

Sobre o CSS seria interessante você usar junto com esta dica do Bruno Alves.

Bom, primeiro lhe apresento a função que tira todos os Enters, tabs, comentários CSS e (X)HTML. Basta colocar no index.php de seu site.

function strip($buffer) {
  return trim(preg_replace('/\n|\r|\t|<!--(.*)-->|\/*(.*)*\//', null, $buffer));
}

Agora em seguida é só usar o buffer do PHP com a função strip no callback.

Exemplo com o index do WordPress:

define('WP_USE_THEMES', true);

function strip($buffer) {
	return trim(preg_replace('/\n|\r|\t|<!--(.*)-->|\/*(.*)*\//', null, $buffer));
}

ob_start('strip');
	require('./wp-blog-header.php');
ob_end_flush();

E pronto, todo (X)HTML que seu WordPress gerar vai ficar em uma única linha e sem comentários. Lembrando que você pode usar este código em qualquer sistema: Drupal, CakePHP, Joomla. É só usar o código corretamente no index.

PS: Sobre o vídeo tutorial “Como trabalhar com URLs Amigáveis” peço desculpas pela demora, nele vou ensinar técnicas avançadas para gerenciar URLs e como usar slugs.

Está no ar a versão 2008 do site 24 ways, e já temos 2 dicas. Para quem não sabe o que significa o site 24 ways, ele é um site desenvolvido pelos maiores profissionais do desenvolvimento web mundial, composto de 24 dicas para impressionar seus amigos.

O site já existe desde 2005, e os tutoriais se iniciam a partir do dia 1 de dezembro de e vão até o dia 24. Só uma dica, essa versão não está funcionando corretamente no Firefox 2, Opera, não testei no Firefox 3 , mas no Google Chrome, Safari e Firefox 3 (obrigado Eduardo Sarsur por me avisar via Twitter) funciona legal. Pode ser que eles irão corrigir isso.

Versões anteriores

• 24 ways: Versão 2005
• 24 ways: Versão 2006
• 24 ways: Versão 2007

Para muitos desenvolvedores, editores do tipo WYSIWYG deveriam ser banidos da face da terra, sejam eles adeptos do Notepad++, EditPlus ou Bloco de Notas, eu não tenho nada contra quem usa esses editores, pelo contrário, eu também já os utilizei em minha jornada, mas hoje utilizo o Dreamweaver pois ele simplesmente atende as minhas necessidades no trabalho. Mas esse agora não é o propósito desse post.

O termo WYSIWYG quer dizer: “What You See Is What You Get“, e em português claro: “O que você vê é o que você obtém“, o Dreamweaver é um editor desse tipo, mas ele também possui o modo de edição de código, que é o que eu utilizo, pois alguém já tentou desenvolver algum site nele no modo Design View? Não façam isso (agora cheguei no propósito do post), pois o que você está vendo alí nem sempre é o resultado esperado, prefira sempre, utilizar o modo código, e visualize sua página no browser, mas nunca dentro do Dreamweaver. Querem ver um exemplo do desastre que pode provocar o Design view do Dreamweaver? Olhem a screen abaixo:

Agora vejam no browser como a página deveria se comportar. Viram a diferença? Nunca desenvolva no Dreamweaver no modo Design view, a não ser que queira ter sérios problemas. Mas pelo que andei lendo recentemente a nova versão do Dreamweaver vai utilizar o motor de renderização WebKit, mas isso não me anima a começar a utilizar o modo Design, ainda vou continuar no modo código.

Os desenvolvedores interessados hoje me desenvolver para iPhone e iPod Touch podem ficar felizes pois Diego Martín Lafuente desenvolveu um framework para facilitar esse trabalho chamado: Universal iPhone UI Kit, onde você também pode ver uma prévia do Framework em funcionamento.

O Framework segue a linha de desenvolvimento de iUI, de Joe Hewitt, emulando uma aplicação nativa, evitando assim romper o perfeito equilíbrio que a Apple conseguiu em suas aplicações.

Graças a utilização do Safari no iPhone e no iPod Touch, você pode utilizar ao máximo os seletores CSS 3, juntamente com um XHTML dentro dos padrões, levando sua aplicação ao extremo em pouco tempo de desenvolvimento.

Download

• Arquivo zip
• Via SVN

Imagine a situação acima, ano de 2100, os browsers em versões altamente avançadas e nós desenvolvedores ainda testando os sites no Internet Explorer 7. Não duvido disso.

Via: Beast-Blog.com.