Não Esqueça .com

Há alguns dias atrás, estava olhando o cakePHP, framework em PHP bem maneiro pensando em usar para começar um projeto pessoal e quando fui configurar vi que precisava de um hash para segurança. Como eu odeio fazer esses hash’s, mesmo sabendo o motivo de serem usados, copiei um do wordpress, quando me veio a idéia de agrupar todos esses geradores de hash em uma única página.

Como disse, de cara lembrei que o wordpress também precisa de alguns hash’s então foi mais um motivo pra criar o gerador, nunca lembro onde eu posso gerar, então, sendo eu que fiz eu não esqueço..

Criei entao os geradores de hash.
Tem gerador de hash para cakePHP e gerador de hash para wordpress, de quebra tem um gerador de senhas.

Se encontrar algum problema me avisa. Ah, se conhecer algum framework ou qualquer coisa que utilize um hash manda um comentário que, vejo as especificações se houver e, adiciono na lista.

Semana passada eu estava desenvolvendo uma aplicação para um cliente, que fazia um ajax para solicitar uma listagem de produtos, que por sua vez, também pode fazer algumas requisições ajax. Finalizada a funcionalidade, tudo funcionando bonitnho, até ir testar no IE.

Percebo que ao fazer o ajax as proximas requisições não funcionavam. Fui debugar e vejo que as urls, que são relativas, estavam sendo recuperadas pelo attr(‘href’) do Jquery estavam, no javascript, vindo absolutas, com dominio e tudo mais.

Vou procurar uma solução, mas não acho nada satisfatório, somente um monte de reclamções e uma resposta de que não era bug no jquery e sim do IE, ou algo parecido com isso.

Resolvi então, criar uma solução para isso. Já que ao pegar o attr(‘href’) do link estava vindo a url absoluta, a primeira coisa que pensei foi em dar split na url, que não me agradou de cara pois eu não gosto de fazer split em “ambientes não controlados”. Alguém pode inventar de enfiar algum caractere estranho no meio da url e detonar o funcionamento do script.

Então a principio eu teria que fazer algo parecido com o seguinte (só avisando nao testei esse script, se nao estiver funcionando, é algo parecido com isso ):

var myHref = $('a').attr('href');
var pUrl = document.location; // pega url da pagina
pUrl.split("/", 3); // explode de acordo com o limitador '/' e executa ate 3 vezes
var rUrl = pUrl[0]+"//"+pUrl[1]; // monto a url
myHref = myHref.replace(rUrl,'');
// ajax

Cinco linhas de js, para algo extremamente simples. Basicamente não gosto de ter que fazer muito código para coisas muito simples, exceto quando não há jeito. Curioso que sou, fui fazer algumas buscas e descubro duas funções(?) nativas do javascript que eu não conhecia, alias eu conheci umas dez, mas no caso em questão so precisaremos de duas mesmo . São Elas location.protocol e location.host, que são intuitivas, mas vou explicar o que cada uma faz.

A função location.protocol retorna o protocolo da página com o dois pontos (:). Ex.: http:, https:, ftp:, etc.

Já a função location.host, retorna o dominio da pagina. Ex.: www.naoesqueca.com, yahoo.com, google.com, etc.

Logo aquelas 5 linhas de código viraram uma, location.protocol+’//’+location.host. Nesse momento eu fiquei feliz, foi uma boa troca, cinco linhas por uma.

Mas ai apareceu outro problema, eu teria de modificar umas 5 chamadas de $(‘a’).attr(‘href’) para as tres linhas abaixo.


var myHref = $('a').attr('href');
var dPath = location.protocol+'//'+location.host;
return myHref.replace(dPath,'');


Volto a ficar triste, mas ai tenho uma brilhante ideia, vou modificar o .attr(‘href’) do jquery, o que apesar de ser simples de fazer, é algo que acho que não vale o esforço, pq por mais facil que seja são umas 5500 linhas de js que tem uma grande chance de dar problema. Então parto para a segunda ideia, criar um plugin ( ou extensão) para o Jquery.

Faço um find and replace no meu js de $(‘a’).attr(‘href’) para $(‘a’).relativeHref().

E a função fica da seguinte forma:

jQuery.fn.relativeHref = function(){
	var myHref = $(this).attr('href'); //pego o href do elemento selecionado
	var dPath = location.protocol+'//'+location.host; //pego o protocolo e o dominio da pagina e monto a url.
	return myHref.replace(dPath,''); //substituo a url por nada. Caso esteja no href do elemento e retorna o valor final.
};

Então é isso, volto a ficar feliz por resolver o problema (com 3 linhas de js) do IE de retornar o href para o js como se fosse absoluto, mesmo estando relativo.

Ah, só uma coisa, quando crio esses, plugins para o jquery gosto de adicioná-los imediatamente após a contrução do jquery, é certeza que vai ser lido antes da sua chamada, com isso não haverá erros de função inexistente.

Recentemente estava fazendo alguns testes com o Dosvox e percebi que ancoras usando ID em divs não funcionavam.
Comecei então uma pesquisa para tentar descobrir o motivo para as ancoras nao funcionarem, após algumas horas procurando, desisti por achar o motivo. Então mudei as ancoras para utilizar <a name=”ancora”> que ai passaram a funcionar.
Se alguém souber e puder me explicar porque cargas dagua ancoras com id nao funcionam eu agradeceria.
Vamos ver se dessa vez consigo engrenar e passar a escrever frequentemente.

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.

Atualmente os cantos arredondados, são uma grande dor-de-cabeça no desenvolvimento, pois existem vários modos de implementar, com uma, duas ou quatro imagens?, sem imagens?, só com css?, javascript? qual javascript utilizar?, essas questões incomodam a cada vez que é necessário implementar este tipos de borda, que até o presente momento, não tem como serem feitas somente com css, quem sabe um dia, quando o css3 for lançado.

http://www.w3.org/TR/css3-background/#the-border-radius

Mas enquanto esta e muitas outras melhorias no css3 não chegam e não vão chegam nem tão cedo, temos que nos virar com o que temos, então abaixo listarei algumas técnicas que são as mais interessantes de se implementar, cada uma tem suas vantagens e desvantagens.

Cantos arredondados com uma imagem.

A imagem para criar os cantos arredondados é esta aqui embaixo, para o fundo branco e sem borda, o procedimento para criar a imagem é simples, faça um box de cantos arredondados, em seu software de edição de imagens preferido, e corte um dos cantos, faça uma imagem como a abaixo, colocando os cantos de forma que cada um fique na posição oposta ao outro.

Crie um div para segurar todo o conteúdo do box arredondado e outros dois, um para os cantos de cima e o outro para os cantos de baixo, com mais um dentro de cada um, parece complicado? mas olhe o código abaixo é bem simples…

<div class="wrap-rounded_corners">
    <div class="top_corners">
      <div></div>
    </div>
    conteúdo do box
    <div class="bottom_corners">
      <div></div>
    </div>
  </div><!-- /wrap-rounded_corners -->

E o seguinte css:

/* define o estilo para o box que segura todo o conteúdo
   o overflow hidden é para esconder o que estiver para
   fora da div.wrap-rounded_corners, retire e veja o que acontece
*/
div.wrap-rounded_corners {
        margin: 10px;
        padding: 0 10px;
        background: #0f0;
        overflow: hidden;
}

/* define que todos os divs abaixo terão posição relativa,
    largura de 100% e 9px de altura */
div.wrap-rounded_corners div.top_corners,
div.wrap-rounded_corners div.top_corners div,
div.wrap-rounded_corners div.bottom_corners,
div.wrap-rounded_corners div.bottom_corners div {
        position: relative;
        width: 100%;
        height: 9px;
}

/* define que esta div tem o posicionamento relativo à esquerda negativa em 10px,
    para compensar os 10px de padding da div.wrap-rounded_corners
*/
div.wrap-rounded_corners div.top_corners {
  left: -10px;
  background: transparent url(images/corners.gif) no-repeat -10px -10px;
}

/* define que esta div tem o posicionamento relativo à direita negativa em 30px,
    para compensar os 20px de padding (10px de cada lado) da div.wrap-rounded_corners
    e os 10px de margem negativa da div.top_corners
*/
div.wrap-rounded_corners div.top_corners div {
  right: -30px;
  background: transparent url(images/corners.gif) no-repeat right -10px;
}

/* define que esta div tem o posicionamento relativo à esquerda negativa em 10px,
    para compensar os 10px de padding da div.wrap-rounded_corners
*/
div.wrap-rounded_corners div.bottom_corners {
  left: -10px;
  background: #f00 url(images/corners.gif) no-repeat -10px 0;
}

/* define que esta div tem o posicionamento relativo à direita negativa em 30px,
    para compensar os 20px de padding (10px de cada lado) da div.wrap-rounded_corners
    e os 10px de margem negativa da div.bottom_corners e o overflow hidden, para corrigir
    um bug do IEca que aparentemente não tem explicação para estar ocorrendo,
    retire e veja do que estou falando
*/
div.wrap-rounded_corners div.bottom_corners div {
  right: -30px;
  background: transparent url(images/corners.gif) no-repeat right 0;
  overflow:hidden;
}

Você pode conferir aqui este exemplo funcionando.

Cantos arredondados com duas imagens.

Este tipo de canto arredondado é para um box com largura fixa, o procedimento é simples, é so criar duas imagens, uma com cantos arredondados de cima, e outra com os cantos de baixo, como estas do exemplo abaixo.

Agora, é só criar dois divs, como no exemplo abaixo, um dentro do outro e colocar uma classe em cada um, se quizer caso não queira não tem necessidade, mas é melhor para nao haver problemas, de herança de estilos, com outras divs que possam estar dentro do box:

<div class="top_corners">
  <div class="bottom_corners">
    conteudo do box
  </div><!-- /bottom_corners -->
</div><!-- /top_corners -->

e o seguinte css:

    /*
      Esta div é para segurar todo o conteudo do box de cantos arredondados,
      definindo a largura do box, e colocando a cor de fundo e a imagem dos cantos superiores
    */
      div.top_corners {
        width: 104px;
        background: #2a70ff url(images/rounded_top.gif) no-repeat 0 0;
      }

      /*
        e esta div é para os cantos inferiores, coloca-se a imagem dos cantos
        inferiores com alinhamento ao rodape, esta div não deve ter cor de fundo,
        pois caso tenha irá "esconder" os cantos superiores, e um espaçamento
        para não ter nenhum conteúdo sobre os cantos.
      */
      div.top_corners div.bottom_corners {
        padding: 10px;
        background: transparent url(images/rounded_bottom.gif) no-repeat 0 bottom;
      }

Você pode conferir aqui este exemplo funcionando.

Estes foram dois exemplos simples para dar a direção de como podem ser feitos boxes com cantos arredondados, existem uma grande variedade de possibilidades para fazer os cantos arredondados, é só colocar a cabeça para funcionar que surgirão idéias para resolver o problema.

Agora mostrarei alguns javascripts para fazer os cantos arredondados que você irá ver os prós e contras para ver se é melhor ou pior que fazer com imagens, um ponto a favor é que são “menos trabalhosos” de se implementar e um contra, se o site for “grande e/ou pesado” pode demorar “renderizar” os cantos arredondados.

O primeiro exemplo é o do transcorners, que foi criado por um(a) “cara” ou site chamado Inviz , que o site não está mais no ar, pelo menos não esta pagina, que por acaso eu so consegui depois de sofrer muito em achar para deixar de exemplo, e so me dei esse trabalho porque é um bom script.

Você pode conferir o exemplo funcionado. (em inglês)

Este outro exemplo de javascript foi visto aqui, que por acaso estava fora no momento em que estava escrevendo este post.

Não sei se utilizei todas as configurações disponiveis no exemplo, caso não tenham sido, me avise que coloco todas as propriedades possiveis. Este script é bastante simples de ser implementado e compreendido, ele pode ser conferido aqui.

Esses foram somente alguns exemplos de como colocar em prática os cantos arredondados, caso queira mais algum exemplo vc pode usar um de seus amigos, o Google ou o Yahoo, ou o seu site de buscas preferido, ou este excelente link no CssJuice com uma lista de 25 técnicas diferentes de cantos arredondados.

[]´s e até o próximo post, que pretendo que não demore tanto novamente.

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.

A primeira coisa que deve ser feita antes de começar a desenvolver é organizar, as etapas de desenvolvimento, definir uma boa estrutura de pastas, onde vão ficar os arquivos relacionados ao desenvolvimento(.htm, .php, .asp, .jsp, etc), imagens, javascript’s, css’s, xml’s, swf’s.

Após isso, começar desenvolver torna-se mais fácil, pois tendo em mente o que têm-se para fazer e onde estão todos os elementos necessários ao desenvolvimento.

Uma importante parte dessa organização é o desenvolvimento em camadas, que nada mais é do que utilizar cada tecnologia para o seu propósito específico. O html exclusivamente para marcação (camada de conteúdo), css para estilização do conteudo e layout (camada de apresentação) e caso haja necessidade o(s) javascript(s) para o comportamento (camada de comportamento).

A camada de conteúdo, sem dúvidas, é a mais importante e é composta por textos, imagens, animações, etc. Esta camada é apresentada com uma linguagem de marcação o html ou xhtml, utilizar corretamente as tags é uma boa prática para ajudar seu site a ficar bem posicionado nos mecanismos de busca, esta utilização correta das tags é chamada de semântica.

A camada de apresentação é onde definimos os estilos para o site, tanto para a estrutura do site como para o conteudo, que é composta pelo css.

E finalmente porém não menos importante a camada de comportamento, que é composta pelo tão querido/odiado javascript, que se utilizado de maneira correta trará grandes benefícios para o desenvolvedor e para o usuário.

Nos próximos post´s irei detalhar cada camada e mostrar necessidades e benefícios de utilizá-las da melhor forma possível.

O blog naoesqueca.com irá falar sobre desenvolvimento, focando principalmente (x)html+css+js, e tudo mais o que for referente à desenvolvimento de sites. Tentarei sempre que possivel trazer códigos e a melhor forma de se desenvolver as mais diversas necessidades diárias, que sempre aparecem na hora da montagem de um site, sempre seguindo ao máximo os padrões do W3C.