Web Standards vs. Projeto em dia

Principalmente nas micro-empresas este é um dilema muito comum e recorrente na cabeça dos pobres desenvolvedores.

Muitas vezes o fator web standards nem é um pré requisito no projeto, acontece que a grande maioria dos programadores que entendem a essência dos Web Standards, gostam e sabem, o motivo da utilização dos padrões no projeto.

O grande problema surge, quando o cliente pede algo “lunar” e nós, desenvolvedores temos que entrar no mundo highlander do cliente e desenvolver soluções a altura.

Acontece que, geralmente, soluções mirabolantes requerem implementações mirabolantes, consecutivamente, o nível de manipulação do documento XHTML por meio de Javascript é alto e muitas informações são expostas na marcação HTML, para que o JavaScript possa se guiar.

Tenho certeza que de todos os meus leitores, pelo menos um! vai se identificar com um caso parecido.

O grande pensamento vem a cabeça:

– O sistema não esta validando, e agora? eu só consigo implementar esta solução desta forma, não consegui pensar em outra forma de implementar, e fazer com que meu código consiga se guiar de maneira eficiente, para manipular este documento.

– Perco mais 1, ou 3 dias pensando em uma nova solução somente para implementar esta solução sob o plano B ou deixo este erro de validação passar e sigo em frente com o cronograma?

Caros amigos, não se desesperem. Já se foi o tempo onde os programadores eram neuróticos por validação.

Isso já cansou de ser dito: – Validar o seu código pela W3C nada mais é do que verificar se o seu código esta “gramaticalmente” escrita de maneira correta, ele estar validado não garante que o seu código será renderizado da mesma forma em outros navegadores.

E entramos no dilêma da guerra dos browsers. Você segue os padrões, mas o browser do seu cliente não, e ai? o que acontece depois ? …

Se você se preocupa com os padrões, ótimo!, Deve!

Colocar em risco o ciclo de vida do projeto por causa de um erro de validação não compensa para você nem para sua empresa, pode ter certeza que se você tiver somente este erro, o seu site/sistema não vai se comprometer ou deixar a desejar para o seu cliente.

Pense muito bem na hora de fazer esta decisão. Se você tem um código 100% validado, ótimo! se você tem próximo a 95% validado, ótimo também!

A grande sacada deste texto é mostrar pra vocês que foi se o tempo onde as pessoas eram loucas e fissuradas pelo validador da W3C. O validador deve ser somente ser usado como parâmetro para verificar a sintaxe do seu código XHTML, muitas coisas podem passar despercebido na correria do desenvolvimento, da mesma forma que muitas coisas podem ser corrigidas sem comprometer o andamento do projeto com a “ajuda” do validador.

Use o validador como uma ferramenta aliada e não como uma ferramenta inimiga.

O W3C é uma organização que documenta “recomendações” e não “obrigações”, existe as recomendações que são extremamente fundamentais para a renderização e comportamento correto em diferentes plataformas, porém, temos que ter um meio termo para tudo.

Links

Espero ter contribuído!
[]’s

Faça seu site carregar 500% com PHP Speedy

A AcidDrop lançou recentemente o PHP Speedy. O sistema funciona relativamente de forma simples. Tudo o que ele faz é, além de comprimir os seus arquivos css, js e html, agrupar todos eles em um só arquivo e faz a sua compressão.

Se você possui 15 arquivos javascript e 3 arquivos CSS em sua página, ele vai unir tudo em 1 arquivo js e 1 arquivo css, além de também comprimir o seu código HTML.

Tudo isso traz benefícios enormes para o seu website ligado a velocidade de carregamento e performance. Além dele carregar até 500% mais rápido, ele proporciona os seguintes benefícios:

  • Diminui drasticamente as requisições HTTP.
  • Adiciona um expire-header mais prolongado aos seus arquivos.
  • Gzip os componentes da sua página.
  • Minify seus códigos HTMl, JavaScript e CSS.

Como usar?

Basta inserir o código abaixo, no topo do seu arquivo:
[php]
require_once(‘class.compressor.php’); //Include the class. The full path may be required
$compressor = new compressor(‘css,javascript,page’);
[/php]

E para terminar, coloque o código abaixo, no final do seu arquivo:
[php]$compressor->finish() [/php]

Opções Avançadas

[php]
$compressor = new compressor(array("javascript"=>array("cachedir"=>’/minify’,
"gzip"=>true,
"minify"=>true,
),
"css"=>array("cachedir"=>’/wp-content’,
"gzip"=>true,
"minify"=>true,
),
"page"=>array("gzip"=>true,
"minify"=>true
)
));
[/php]
No site do autor, também é disponibilizado dois links onde ele apresenta duas versões de um mesmo site, a versão comprimida e a versão não comprimida.

E baseando-se no mesmo site, o autor mostra alguns gráficos comprovando os benefícios do uso do PHP Speedy.

Site de testes antes da compressão

Tempo total de carregamento 3.68 segundos.

Site de testes depois da compressão

Tempo total de carregamento 875 microsegundos.

Agora o autor mostra os beneficios antes e depois do uso do PHP Speedy, os gráficos foram obtidos utilizando o plug-in YSlow da Yahoo!

Antes da compressão

Grade de performace: F(45)

Depois da compressão

Grande de performace: A(97)

Espero ter contribuído! []’s

Palestra sobre SimpleTest no PHPConference 2008

Meu amigo Michael Castilho (DGMike) que também trabalha comigo na Visie, divulgou hoje  (16) em seu blog a sua palestra sobre SimpleTest no PHPConference 2008.

Para os que estão viajando no assunto, SimpleTest é uma ferramentacriada para a programação e execução de testes unitários, escrita e feita para se utilizar em suas aplicações PHP.

Para quem ainda não conhece, vale a pena dar uma olhada em sua apresentação:

CSS Reset não faz mágica!

Olá queridos leitores, este é um post especial… Falo especificamente sobre o CSS Reset de uma forma diferente. Falo sobre o CSS Reset de forma orientativa e não de forma explicativa.

Desde que eu divulguei minha matéria no iMasters e aqui no blog , recebi muitos comentários de pessoas dizendo que o CSS Reset não funcionou, tentaram de tudo mas não funcionou, continua torto.

Eu não quero que você leia o texto sobre o CSS Reset e pense DÊMÔRÔ, MEUS PROBLEMAS ACABARAM!, por que você provávelmente vai bater de cara no muro a 900km/h.

Faça um favor à você, veja o CSS Reset como se fosse um Framework CSS. Você já conheceu alguém que desenvolveu tudo da sua maneira e só no final incorporou o Code Igniter, Cake PHP ou Spaghetti* (jaba pros amigos ^^) por exemplo? obvio que não!

O CSS Reset deixa todos os elementos da sua página de forma que eles fiquem com as configurações exatas em todos os navegadores, ele RESETA as propriedades de forma que todos os elementos da sua página sejam vistos de forma igual, sem importar o navegador.

Vou dar um exemplo:
CSS Reset
Pense em 2 navegadores (Internet Explorer e Firefox), pensou? ok… Agora vamos levar em consideração que:  O que pode ser padrão em um, pode não ser em outro.

Por exemplo: O Internet Explorer gosta de colocar uma margem de 0.3em nas suas listas, mas o firefox gosta de colocar 0.5em (é só um exemplo, okey? respire fundo.).

Por default, este são os valores iniciais nestes navegadores, a não ser que VOCÊ defina um padrão, se você não definir, o navegador vai assumir um por você, e estes padrões podem ser diferentes dependendo do navegador que você acessa o projeto.

O CSS Reset entra para acabar com isso, deixando todas as carácteristicas dos elementos iguais em ambos os navegadores. Se você faz todo o seu projeto, todo lindo, todo pompozo, de 1.000.000 páginas e só então adicionar o CSS Reset no final do projeto, é bem provável que o seu projeto vá ficar mais torto do que já está.

Para acabar com as dúvidas

Veja o CSS Reset como um Framework, aquele que vai ficar lado a lado com você do início ao fim e ponto.

[]’s
Igor.

CSS Reset: Firefox, perfeito! Internet Explorer, torto?

Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que seu site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se visto muito falar nos tais “CSS Resets“. Antes de falar o que é o CSS Reset eu vou explicar por quê seu site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam, por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja) mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro mais sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas, o objetivo dele, é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura etc… sempre vão ser iguais independente do browser que estiver renderizando seu site.

Agora você ficou interessado, né?

É bem simples, salve o código CSS a seguir com o nome de reset.css

[css]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing="0"’ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
[/css]

Como devo chama-los no meu cabeçalho?

Exemplo

[css]
<style type="text/css" media="all">/*<![CDATA[*/ @import "/css/reset.css"; /*]]>*/</style>
[/css]

Pronto!
Agora você só precisa criar o CSS do seu site e começar a definir as regras do seu layout.

Ainda não entendeu? Leia este texto complementar sobre CSS Reset.
Webtutoriais:B92473D6

Tableless, o termo maldito ?

Recentemente, vi alguns profissionais e blogueiros revoltados com a repercussão do termo “Tableless” na mente dos pobres alunos e aprendizes.

Pensamento Tableless

Meu objetivo com este texto, é tentar salvar as pobres mentes puras de alguns destes aprendizes que talvez cheguem até aqui através dos buscadores, sites que estejam licando a matéria, etc. Provavelmente grande parte dos meus leitores já saibam exatamente o significado deste termo e como utilizar esta técnica na prática, o aprendizado é inevitável, cedo ou tarde você acaba descobrindo o que é Tableless de fato.

O Problema

O termo Tableless veio à tona no Brasil em 2003, pelos amigos Elcio Ferreira e Diego Eis, fundadores do site www.tableless.com.br, que incentiva o uso da técnica, com exemplos, mostrando benefícios, boas práticas de desenvolvimento e diversos assuntos que giram em torno do código fonte do desenvolvedor. Para a maioria destes aprendizes, este site pode se tornar evangelizador (rs), você entra crendo no poder das tabelas e sai como table-killer.

Esta é a visão interpretada pela maioria das pessoas. Sempre que alguém começa a ler sobre o termo, logo quer sair botando a mão na massa, e contar para todo mundo: – Agora eu sei Tableless, é fácil, é só nunca mais usar tabelas ;)

As pessoas tendem a ler o conteúdo pela metade ou rápido demais, ignorando detalhes, afinal, a sua teoria já esta embutida no seu próprio título certo? Errado!

Eu não sei ao certo o que acontece. É difícil identificar de quem é a culpa, enfim, de duas, uma:

Pode ser nossa (disseminadores de conteúdo), que passamos a informação as vezes incompleta, sem muita clareza, omitindo alguns detalhes, ou a culpa é do próprio leitor.

Tableless – Definitivo

O termo Tableless fez começo de 2008, 5 anos que o termo vem sendo falado, estudado e colocado na prática no Brasil.

O Tableless é um técnica de desenvolvimento web cujo o foco esta exclusivamente no seu código fonte. Antes de aplicar o tableless e sair por ai saltitando, estude a semântica das tags, amplie o seu conhecimento em relação às tags, se você não conhece o HTML a fundo, sua capacidade de criação de interfaces com Tableless fica muito limitada, e exposta ao famoso “jeitinho brasileiro” ou gambiarras, como preferir.

Tableless não é NUNCA mais usar tabelas, Tableless é usar as tags do HTML respeitando os seus valores semânticos, se você programa sob esta filosofia, automaticamente seu código no final será um código, semântico, compatível e claro, Tableless.

As tabelas foram criadas para exibição de dados tabulares e não para estruturação de layout e criação de interfaces.

A W3C diz:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.”

Tabelas não podem ser utilizadas meramente para definição da estrutura do seu layout, isso provavelmente vai gerar problemas na rederização para midias não visuais.

Se você parar para fazer uma análise, vai ver que é uma resposta meio lógica, se a web 2.0 encoraja o uso dos padrões web para o desenvolvimento, por que o Tableless, que é um técnica que surgiu junto com o amadurecimento da web, iria encorajar o contrário?

O termo talvez gera dúvida na cabeça das pessoas por que todos os lugares que você encontra fonte de informação principalmente no tableless.com.br fala-se muito em livre-se das tabelas, o fim das tabelas, tabelas nunca mais etc.

O autor do texto repete muito isso somente para fixar o objetivo do técnica e enfatizar o resultado em si. Mas em nenhum momento é citado que você deve esquecer as tabelas, se fosse somente isso, esquece-las, seria simples, tudo gira em torno de como se virar sem elas para fazer o básico o resto é com você.

Tableless = Menos tabelas (rs) e não livre de tabelas ou sem tabelas ou qualquer outra variante.

Aceita uma dica? Não leve as coisas tão ao pé da letra, tente entender o por quê das coisas antes de mudar.

Eu sei que este texto não vai chegar nem a 0,00000001% das pessoas que estão começando com desenvolvimento web, mas se este texto pelo menos ajudar uma pessoa a pensar diferente sobre o Tableless se encontrando na definição dos termos já vou ficar contente.

Links Úteis:

Espero ter contribuído!
[]’s

Dica: PHP Highlight

Poucas pessoas sabem da existência da função highlight_string(); do PHP. Esta função tem como objetivo “colorir” o seu código fonte, uma string no caso, para que fique mais fácil o seu compreendimento.

Por Exemplo:

highlight_string('<?php phpinfor(); ?>');

Iria retornar:

<?php phpinfo(); ?>

Bacana não é?

Outra coisa que provavelmente muitos de vocês não saibam é que nativamente existe uma extensão do PHP chamada “.phps” ao acessar um arquivo PHP por esta extensão, o PHP automaticamente irá exibir o fonte da sua página de forma “colorida”.

Teste você por ai ;)

Abraços.

PHP não é coisa de moleque!

A palestra que Felipe Ribeiro deu no primeiro encontro de desenvolvedores PHP da Paraíba abordou um assunto muito importante e recorrente no dia-a-dia de todos os profissionais que trabalham com PHP.

Se pararmos para pensar, PHP sofre o mesmo dilema que sofremos com o famoso “sobrinho”, sim! – aquele que costuma fazer o serviço cobrando 1/3 do preço, 1/3 da qualidade e 0/3 segurança.

Felipe Ribeiro divulgou em seu site os slides da palestra que ele ministrou no I encontro de desenvolvedores PHP da Paraíba, aonde ele faz uma reflexão muito boa sobre o motivo desta “fama” que o PHP tem, vale pena dar uma caminhada pelos slides, principalmente se você for uma destas pessoas quer formaram um “pré”-conceito com relação a esta linguagem que definitivamente, não está para brincadeiras.

PHP não é coisa de molequehttp://static.slideshare.net/swf/ssplayer2.swf?doc=slides-1228060166778844-9&stripped_title=php-no-coisa-de-moleque-presentation

View SlideShare presentation or Upload your own. (tags: php evangelizacao)

Outros slides deste encontro podem ser vistos aqui:

http://www.slideshare.net/tag/i-encontro-php-pb

Igor
[]’s

SEO White Hat vs. Black Hat

Hoje em dia é comum vir um cliente até você e perguntar:
– Vocês conseguem fazer meu site ficar em primeiro nas buscas?

Nessas horas muitos profissionais pensam em trocar o chapéu para poder deixar o cliente surpreso ou feliz.

De todas as práticas que um SEO pode adotar para garantir um bom posicionamento ou não de um projeto nas buscas, elas são divididas em duas categorias, técnicas black hat e técnicas white hat.

Técnicas Black Hat SEO (Técnicas de chapéu preto)

Existe um amplo significado do termo Black Hat, profissionais do ramo de informática chamam Black Hat, as práticas adotadas por profissionais para atingir um certo objetivo sem a autorização prévia do orgão, empresa e/ou pessoa responsável.

Este objetivo pode ser vários, mas especificamente neste texto irei abordar o termo Black Hat no mundo das buscas.

Falando de SEO especificamente, black hat são técnicas utilizadas para garantir um bom posicionamento nos buscadores em curto prazo.

Quem nunca se deparou com um site de fundo branco e ao apertar o CTRL + A, aparecer uns textos que normalmente não se pode ver, hoje é possível de encontrar prática como essa executadas em grandes projetos (que não posso citar) para tentar passar duas ou três paginas de vantagem dos concorrentes com o objetivo de tornar a pagina mais relevante na visão dos buscadores usando artifícios.

Nas Diretivas para Webmasters do Google é recomendado que você:

Como podem ver o próprio google já tem em seu banco de dados, as principais práticas que trazem resultados eminentes, lembre-se, a Google é uma empresa de milhões de dolares, não abuse nem duvíde da inteligência do seu negócio, eles estão de olho.

Sou Black Hat SEO, o que pode acontecer comigo?

O google afirma que é capaz de reconhecer tais práticas e afirma também que existe penalidades para pessoas que tentam ganhar posicionamento nos buscadores utilizando artifícios:

  • Ignorar o algoritmo sem penalizar o site.
  • Fazer com que caia o posicionamento do site nas buscas, tornando-o ridiculamente irrelevante.
  • Apagar o site do índice do Google.

Técnicas White Hat SEO (Técnicas de chapéu branco)

As técnicas white hat são as técnicas “legais” recomendadas, que podem ser executadas por um SEO para atingir bons resultados nos buscadores em alguns casos, em curto prazo e em alguns, a longo prazo.

De modo geral, para ser um White Hat SEO basta criar o seu projeto com amor, com trabalho e com seriedade.

Todo site que produz conteúdo para o seu usuário final, não tem por quê ser encarado de forma ruim pelos robots.

Fechando o assunto…

Se você possui um negócio, certamente não vai querer que o SEO do seu projeto use tais práticas, elas trazem bons resultados a curto prazo, porém, os sites que foram otimizados por um Black Hat SEO tendem cair nas buscas drasticamente no futuro, o que é bem ruim para os negócios.

Se você quer ser sempre bem posicionado, faça o seu trabalho com calma e com carinho para os usuarios, boas notícias se espalham e as paredes tem ouvidos (google).

Vale lembrar que existe várias coisas que favorecem o seu conteúdo a um bom posicionamento:

  • Código fonte semântico.
  • Quanto mais limpo for o seu código fonte, melhor os robots conseguiram classificar a relevancia e o teor do seu conteúdo.
  • Crie conteúdo para o seu usuário final e não para o buscador.
  • O Tempo de vida do dominio é um favor importante.
  • Troque links, faça parcerias com sites do mesmo gênero, isso fortalece o seu site (aumento de pagerank).
  • Evite o uso excessivo de animações flash, os robots tem dificuldade de ler tais formatos de mídia consecutivamente identificar o gráu de relevancia do seu material.

Links Interessantes:
http://www.seomarketing.com.br/black-hat-SEO.html
http://www.marketingdebusca.com.br/black-hat-seo/

Webtutoriais:AD9497F1