Não Esqueça .com

Há quase 1 ano não estou mais em agência trabalhando com diversos públicos. Venho trabalhando em dois portais de conteúdo e público mais específico, o que me agrada bastante e to curtindo muito até agora.

Tá certo que o público não é tão específico quanto de um hotsite ou campanha, mas acredito ser muito mais específico e selecionado do que muitos possam imaginar. Por exemplo, é um público que compra na internet, que usa cartão de crédito, que viaja a turismo ou trabalho constantemente. Logo não é um público de pouca renda ou com baixo nível de conhecimento de internet, acredito eu apesar de alguns estudos e dados não confirmarem tanto.

Constantemente debato com meus colegas se nosso público é básico, se temos usuários com idades superiores a 60 anos (logo com dificuldade de leitura e coordenação montora – salvo raras excessões), se temos usuários com dificuldade de visão e por não ter uma resposta concreta ou a maioria deles achar que sim, acabo me frustando ao desenhar nossas interfaces.

Não acredito que isso seja verdade. Acredito que o nosso público seja de usuários médios pra avançados, que já tenham uma experiência de compra online e que não tenham mais medos e dúvidas sobre tal experiência. Assim como ter que manter um site/projeto pra IE6 e 1024×768 de resolução de tela. Se a pessoa não possui um computador atualizado, vai ter dinheiro pra gastar comprando online? Comprando objetos, livros, passagens aéreas, fazendo transações bancárias e etc, duvido.

Estudos dizem que brasileiros gastam boa parte do tempo pra fazer transações, compras e usar redes sociais durante o dia e no horário de trabalho. Se o cara trabalha numa empresa que mantém os computadores desatualizados, essa mesma empresa deve vetar o uso de alguns sites no horário do expediente, logo, essas pessoas devem realizar essas transações no conforto do lar no seu laptop, smartphone (alguns em suas tablets) ou desktop. É raro hoje em dia encontrar computadores a venda com monitores menor que 17″ e com isso resoluções menores que 1024×768 vão ficando cada vez menos comuns.

Claro que não posso ignorar os novos usuários que estão chegando, a famosa inclusão digital (como eu odeio esse termo). Esses novos usuários que ainda estão aprendendo a usar as coisas, aprendendo a comprar e que tem um poder de compra alto. Ou seja, não dá mesmo pra tirá-los da base. Porém a cada ano a curva de aprendizado ao uso de novas interfaces e mídias é mais curta e rápida, logo, não é motivo. E esses novos usuários já compram computadores melhores, do que disse no parágrafo anterior, graças as facilidades de carnês e cartões de crédito.

Outro grande problema que encontro é a famosa quebra de paradigmas. Pessoas que trabalham com internet, porém, são conservadoras demais e acabam não se atualizando com a mesma velocidade e frequência da rede (Brasil só levou um cyber, prata, em Cannes por exemplo). E não me venham falar de verba, porque o brasileiro é reconhecido mundialmente como um po(l?)vo criativo que dá nó em pingo d’água.

Não me falem que não tem tempo ou a equipe não pode ser parada para melhorar um projeto ou começar um novo do zero. Medinho é uma coisa que me deixa puto. Se você tem uma equipe de 1 front, 1 developer e 1 designer, realmente você não pode fazer muita coisa num projeto que já está todo errado. Mas se você pode dividir a equipe em duas, uma (re)constrói de forma certa o que está errado e a outra fica mantendo (por hora) o que está no ar, qual problema disso sr. 06? Quer passar o comando pra quem tenha colhão suficiente? Então passa.

Se grandes empresas seguem investindo em novas ideias, novas interfaces, empresas que tem um público variado e milhões de acessos por mês, tentam e fazem a coisa funcionar, por que você que tem alguns milhares e um público semelhante também não pode? Brasileiro é assim mesmo, preguiçoso e com uma zona de conforto grande. Segundo minha grande amiga Ana Erthal: “O problema todo é que as agências ainda pensam, em pleno século XXI e no meio dessa turbulência de informações e mobilidade social e cultural, como se pensava há 40 anos. Elas pensam como veículos de massa. E não é mais assim. A comunicação se fragmentou juntamente com a identidade dos sujeitos e da cultura… e não tem mais volta. Desde a invenção do controle remoto a comunicação se tornou individualizada e promíscua na ultilização de meios e ferramentas. E as agências, em vez de perceberem esse movimento natural evolutivo, elas continuam olhando para trás, usando modelos ultrapassadíssimos para tentar entender o sujeito contemporâneo e sua pluralidade. É triste. E é esse o motivo que não as deixa caminhar pra frente: daqui não sairá nenhum cyber“. Aí se você vem com ideias e ideais que batem de frente e que forçem as pessoas a pensar e a inovar, você é de outro planeta ou tá tentando pensar muito na frente dando um passo maior que a perna e não vai alcançar a outra margem do rio.

Já ouvi pessoas dizendo que ainda não acreditam em mobile apps mesmo depois do sucesso astrnômico do iPhone e Android, mesmo com tudo se convergindo e mostrando o contrário. E não foi estagiário que falou isso não hein. No twitter mesmo, canso de ver pessoas que se dizem responsáveis por mídias sociais ou que tenham foco nelas, postarem coisas com 1 semana, 1 mês e as vezes mais tempo de atraso achando que é novidade com a desculpa que estava muito ocupado com o job do cliente e nāo teve tempo de ler ou ver o que aconteceu na semana. Me desculpe, mas esse job desse cliente aí vai ser antigo quando ele for lançado então, viu capitão?

Felizmente em alguns casos não é assim, mas vejo muitos projetos, agências, empresas que ficam pensando muito no hoje e no ontem e não no amanhã.

É por isso que tem tanta gente boa saindo do país pra “fazer internet” lá fora. Agências dos EUA e da Europa estão anos luz a frente das tupiniquins em termos de planejamento, estrutura e principalmente condições de trabalho. Se você dá liberdade pro seu profissional criar, seja ele de criação ou não – porque boas ideias vem de qualquer um e de qualquer lugar – tenho certeza que os projetos vão ficar cada vez melhores.

Um exemplo disso são os hackdays e hackathons da vida como fazem o Facebook, o Google e o Linkedin. Boas, não, excelentes ideias surgiram desses exemplos: Orkut, Gmail, GoogleDocs no Google, vídeo, like, face tag no Facebook, exportar seu currículo, grupos no Linkedin. Os profissionais são incentivados a estar sempre buscando novas soluções por puro prazer e não porque é o trabalho deles.

É aí que está toda a diferença cultural da coisa.

Olá, depois de algum tempo sem postar volto com a solução de um velho problema, url amigáveis!

Semana passada perguntei para os dois caras que, conheço que, são os mais entendidos de wordpress, onde eu poderia encontrar alguma documentação sobre o funcionamento do permalink, apesar de achar que já sabia qual seria a resposta.

O Gustavo Bordoni me respondeu o seguinte “@andersonsolano Cara essa é a parte mais obscura do WP, é bem complicado… Mas o que mais ou menos você quer fazer?”.

E o Guga Alves respondeu o seguinte “@andersonsolano Quem come funções de WP no almoço é o @webord , ele que sabe quase todas de cabeça rsrsrs”.

Voilà, como eu imaginava, não existe ou é desconhecida, qualquer documentação sobre o assunto.

Eu queria estudar como as urls sao montadas no wordpress, para poder fazer algo que fosse bem aplicável em qualquer situação, desde um site com meia dúzia de páginas ou um com  500 páginas e urls dinâmicas.

Mas como não tem documentação, então pensei que devia ter algum jeito de fazer as urls amigáveis sem ser pelo tradicional método do htaccess com expressões regulares ou usando forcetype também pelo htaccess.

Parei para pensar e fui olhar o funcionamento do htaccess do wordpress e percebi que as urls sempre chamavam o index.php, logo entendi o porque de ter a url salva no banco de dados na tabela dos posts.

Então parti para a parte legal da história, pensar as funcionalidades que são necessárias para o funcionamento.

Não vou explicar tudo o que foi feito para não alongar demais esse texto, listei abaixo as principais funções explicarei para que elas foram feitas, mas você não precisa se preocupar em utilizá-las pois fiz funcionamento para ser o mais simples possível.

Para utilizar, você precisará configurar três linhas de código, duas no htaccess e uma no index.php.

Bom vamos as funções:

is_home()

Verifica se é a página inicial e adiciona o arquivo home.php.

eval(RURI)

RURI é uma constante em que a url solicitada foi transformada em array, como constantes não podem ser arrays, o valor dela é transformado em texto com a formatação de array, quando precisar utilizar faz-se o eval para ser um array novamente.

$requestURI = eval(RURI);

variavel que ja tem a consfante RURItransformada em array.

addSlash()
verifica se o último caractere é uma barra (/) se não for, adiciona a barra ao final da url e faz um redirect 301.

redir301($newurl)
função para fazer o redirect 301.

r404()
função para retornar o header 404 e adiciona o arquivo 404.php avisando do erro. Esse arquivo poder ser altefado para o seu layout a vontade.

configUrls.php

Aqui começa a brincadeira para você: se você precisar de muitas urls ou urls com subdiretórios você precisa configurar quais são essas urls e qual arquivo vai ser chamado.
Ex.

<?php
$configUrls['article'] = 'article.php';
$configUrls['article/teste-url'] = 'article01.php';
$configUrls['news'] = 'news.php';
?>

sem configUrls.php

primeiraPasta.php
Se forem poucas páginas vc pode apagar o configUrls e usar o nome do arquivo como sendo o texto da primeira pasta da url.

index.php

Esse arquivo deve ter somente essa linha, qualquer modificação para seu site deve ser feita nos arquivos que você irá listar no array $configUrls.
Aqui comecam as configurações, na variavel baseUrl você deve colocar a pasta, ou as pastas, que in ddi cam onde é a raiz do projeto, por exemplo se o site vai ficar em http://dominio.com/site/ vc deve colocar /site/ na variavel, caso a raiz seja o proprio dominio deixe em branco.

<?php $baseUrl = ''; include('_uf/funcs.php'); ?> 

.htaccess

Abaixo segue como o .htaccess deve ficar, sim ele é igual ao que ok wordpress gera.

<IfModule mod_rewrite.c>
RewriteEngine On RewriteBase /
# mesma coisa na linha acima caso tenha a pasta site, adicione apos a barra site/
RewriteRule ^index\.php$ -[L] RewriteCond
%{REQUEST_FILENAME} !-f RewriteCond
%{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]
# idem na linha acima, que você deve indicar onde fica o arquivo index.php
# então o final da linha fica ./site/index.php
</IfModule>

Feito isso o seu site está pronto para utilizar as urls amigáveis.

Não esqueca de manter a pasta _uf, caso mova, ou remova, ajuste o caminho do include do funcs.php no index.php

Então é isso, você pode testar script de urls amigáveis ou baixar e usar urls amigáveis no seu próximo projeto.

Gostou, não gostou, achou um bug? comenta ai!

O leitor Marco lançou um desafio, utilizar a técnica de dois backgrounds de uma forma um pouco diferente, ao invés de um background p repetir em X e Y, e outro p repetir somente em x, ele quer dois backgrounds na vertical, sendo que ele testou da seguinte forma no css:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  background: transparent url(images/bg_02.gif) repeat-y 0 0;
}
body {
  background: transparent url(images/bg_01.gif) repeat-y right 0;
}

E as palavras dele sobre o código:

Ao deslizar a barra de rolagem, observe que o background da tag body não segue até o final, pois este possui [height:100%], ou seja, 100% da área visível do browser. E se colocar [height:auto], o background segue o tamanho do conteúdo inserido no documento, ou seja, se não houver conteúdo, não haverá background na tag body.”

Então quando temos um conteúdo maior do que a área util do browser, o bg do body não continua repetindo, segundo ele um pequeno bug no Firefox (não tenho uma opinião sobre ser ou não um bug do Firefox, pois eu tenho um pensamento um pouco radical, se ta diferente no IEca e no Firefox o IEca ta errado.) testei no Opera e aconteceu a mesma coisa que no Firefox, e que ao colocar height: auto, até funciona, mas caso nao tenha conteúdo o bg não aparece.

Eis que entra um pequeno truque, que fez funcionar no Firefox e no Opera, no IE já estava “funcionando”, então é só colocar um height: auto !important; e um min-height: 100%; no body, mas para não ter dúvidas colocamos no html também, mas só no body já resolve o problema…

[UPDATE]
O leitor percebeu uma falha minha, por pura preguiça minha, e talvez um pouco de organização demais, coloquei o height:auto !important; min-height: 100%; no html e no body, o que faz voltarmos ao erro de nao exibir o bg caso nao tenha conteudo.. Obrigado Marco ou Allan…
[/UPDATE]

html, body {
  height:auto !important;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
html {
  background: transparent url(images/bg_02.gif) repeat-y 0 0;
}
body {
  height:auto !important;
  min-height: 100%;
  background: transparent url(images/bg_01.gif) repeat-y right 0;
}

O height: auto !important é para os browsers que nao reconhecem o min-height, o IEca não precisa pois ele ignora sumariamente que tenha uma altura fixa, que não é este o caso, o min-height é para os browsers que interpretam e vão forçar para que eles tenham uma altura minima, no nosso caso 100%.

O exemplo funcionando pode ser visto aqui.

Então ai está, missão dada, é missão cumprida. Se aparecerem outras dúvidas mandem, quem sabe a sua dúvida não vira um ‘desafio do leitor‘.

Esta semana desenvolvendo um projeto, me deparei com o seguinte problema, dois backgrounds em direções diferentes um horizontal no alto da tela e outro vertical.

A primeira coisa que pensei foi que teria que colocar uma div com 100% de altura e largura para poder colocar esses dois backgrounds, para eu não ter que fazer uma imagem gigantesca. Só que foi não querendo colocar uma div para fazer o papel de um “segundo body”, que tive uma brilhante idéia, vou colocar uma das imagens na tag html e a outra no body.

html, body {
   margin: 0;
   padding: 0;
 }
html {
   background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
   background: transparent url(images/bg_01.gif) repeat-x 0 0;
}

As imagens:

Só que ai veio o problema a unica imagem que aparecia era a que estava na tag html, que estranhamente assim que se retirava o css da tag html aparece o bg da tag body.

Foi ai que percebi, na minha opinião, um bug de renderização/interpretação do css, e logo vi que tinha que achar um jeito para resolver isso, foi em minha terceira tentativa que tive sucesso no que queria fazer, coloquei as tags html e body com height: 100%, e assim resolvi o problema.

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
html {
   background: #0ff url(images/bg_02.gif) repeat 0 63px;
}
body {
   background: transparent url(images/bg_01.gif) repeat-x 0 0;
}

As outras duas tentativas sem sucesso foram colocar o height: 100% só no body e depois só no html. Caso queira ver o problema resolvido, veja aqui um exemplo funcionando.

Eu vejo por ai muita gente falando um monte de “dicas” de como otimizar um site pare ele ser acessível e dando suas opiniões de leitores de tela entre outras coisas que ao terminar de ler, uma grande parcela dos leitores continua na mesma ou entendendo menos ainda de como por na prática seu pouco, ou nenhum, conhecimento de acessibilidade, que com essas “sensacionais dicas” não fazem nem idéia de por onde começar a colocar em prática as regras e as tais “dicas” de acessiblidade.

Não estou dizendo que as “dicas” não são boas, muito menos que a minha é melhor, só que muita gente não faz nem idéia de como colocar em prática estas “dicas”, também não acho justo que uma meia dúzia de blogueiros que realmente sabem como fazer toda a sacanagem de montar um site seguindo os padrões e necessidades para um site acessível entre outras coisas, dar de bandeja o “pulo-do-gato”, para quem não quer correr atrás e aprender.

Sei que as regras de acessiblidade e a real experiência dos usuários com necessidades especiais ou dos diferentes tipos de mídia, vão muito além da “dica sensacional” que vou dar de como ter um site com o mínimo de acessiblidade.

Devido a correria dos projetos em que estou envolvido, não me preocupo muito com a acessibilidade dos sites que monto, eles acabam ficando com o mínimo de acessibilidade devido ao uso dos padrões e do desenvolvimento em camadas.

Então vamos a minha “dica sensacional” de como fazer um teste rápido, fácil e indolor. Abra o site a ser testado no seu browser, ou pseudo-brower, de preferência e desabilite o css ou edite o código e retire o css do site e tente utilizá-lo, se você conseguir utilizar, por mais que você nunca tenha visto a documentação de acessiblidade você não irá proporcionar aos usuários do site a pior experiência do mundo com um site.

E, se você nunca viu esta documentação vou lhe dar mais uma dica coma-a com farinha no café-da-manhã, você só tem a ganhar. Aliás não só esta, mas todas as outras que forem úteis no desenvolvimento.