Nosso script de imagens vai crescendo, agora a galeria de fotos já está funcionando, tem algumas coisas a arrumar.
Mas funciona.

Agora na versão 2.0.0 veja o que foi mudado:

• Incluido script para pré-carregar todas as imagens da galeria.
• Galeria de fotos funcional com botões de ir a foto anterior e posterior.
• Botão fechar colocado acima da foto a direita para melhorar a intuitividade.
• Incluido titulo acima da foto, o titulo é o mesmo incluido do link, é capturado por javascript.

Bom é isso, pretendo nos próximos dias corrigir algumas falhas, como em centralizar a foto que as vezes falha, fundo transparente que em alguns navegadores em páginas com barra de rolagem termina antes da página, e algumas imagens sem o texto alternativo.

Link para página de download e de exemplo do funcionamento do script:
http://www.fazedordesite.com/exemplos/fotomaior/visualizarfoto.html

Conto ainda com participação de todos para testar o script e darem sugestões.

Essa é a terceira atualização do script que comecei a montar aqui com o acompanhamento de vocês.
Já estamos na versão 1.2.0.

Peço que se possível reportem bugs e incompatibilidade com navegadores, este script foi testado com sucesso no Internet Explorer 6,7, Firefox 2.0.0.6, Opera 9, Safari Windows 3.0.2, Netscape 8.1.3.

Lembro que sugestões são sempre bem vindas.

Alguém com algum conhecimento de Javascript pode dizer que tem algumas coisas ali que podem ser feitas com menos código, sim, é verdade, mas a minha idéia é deixa-lo a principio mais simples, mesmo assim para inicianets ele começa a se tornar um pouco difícil de entender, mas espero que os comentários no código ajudem.
Caso continue a atualiza-lo pretendo fazer essas mudanças e tornar o código mais otimizado.

O que mudou nessa atualização:

• Corrigido problema de aparecer a imagem anterior no quadro enquanto carregava a nova.
• Adicionada uma GIF animada para indicar que a imagem está sendo carregada.
• Alterados alguns estilos CSS.
• Alterada a forma de controle de largura e altura do quadro que exibe a imagem para comportar o pré-loading.

Link para página de download e de exemplo do funcionamento do script:
http://www.fazedordesite.com/exemplos/fotomaior/visualizarfoto.html

Links para posts anteriores a este sobre o mesmo script:
Primeiro post aqui.
Segundo post aqui.

Por hoje é isso, mas espero participação de todos para testar o script e sugestões, não apenas desse script, mas em novos que posso montar junto com vocês aqui.

Falarei hoje de algo que não é exatamente novo, mas como a cada dia temos novos fazedores de site, nunca é demais evidenciar o que é importante.

O Robots.txt nada mais é que um arquivo texto que é lido pelos robôs(bots) dos sistemas de busca como Google, Yahoo…

O que este arquivo de texto faz é informar ao robô quais diretórios e/ou arquivos não deve acessar, fora os diretórios/arquivos informados neste arquivo ele automaticamente pega tudo que tem no seu site, diretórios, sub-diretórios, arquivos.

Caso você não utilize este arquivinho os buscadores indexam o site todo, ou seja, se seu site tiver uma área reservada, intranet, extranet, o que for, sem esse arquivo, tudo isso será indexado, inclusive aquelas informações confidenciais que seu concorrente adoraria saber.

Sem mais delongas, o que deve ser colocado nesse arquivo?

Agora vem um processo muito “complexo”, primeiro devo destacar novamente que devem criar o arquivo exatamente com esse nome:
robots.txt

Não pode ser .html .php nada disso, deve ser exatamente robots.txt, um arquivo texto simples, use o notepad para criar se quiser.
Este arquivo deve ser colocado na raiz do seu site, será a primeira coisa lida pelo robozinho.

Agora alguns exemplos de como escrever esse seu arquivo.

Para que nada no site seja indexado por nenhum mecanismo de busca insira dentro do arquivo texto o seguinte:

User-agent: *
Disallow: /

O * ali indica que todos os buscadores devem obedecer o que vem na linha a seguir.
E o / significa todos os diretórios, e disallow é negar o acesso.
Logo ali estamos dizendo que para todos os buscadores devemos negar o acesso a todos os diretórios.
Pronto, seu site não será indexado.

Bom supondo que tenhamos um diretório chamado “admin” que deve ser bloqueado a todo custo dos buscadores, pois ali guardamos muita informação valiosa, e que não pode de forma alguma cair nas mãos maléficas da concorrência, como proteger esse diretório?
Simples assim:

User-agent: *
Disallow: /admin/ #diretorio bloqueado

O sinal #(tralha), serve como comentário, o que vem após dele não interfere na definição das regras de acesso.

Mas veja bem, na realidade, aquele diretório que bloqueamos tem apenas um arquivo que é importante e altamente secreto, que é o “formula_da_cocacola.doc”, o restante gostaria que fosse indexado.
Perfeito, porque não disse antes? Neste caso vamos bloquear apenas o segredo industrial mais bem guardado do século, e o faremos da seguinte forma:

User-agent: *
Disallow: /admin/formula_da_cocacola.doc #XooOOoo buscadores.


Agora para resumir, caso queira bloquear mais de um arquivo/diretório pode fazer assim:

User-agent: *
Disallow: /admin/ #diretorio bloqueado
Disallow: /intranet/ #diretorio bloqueado
Disallow: /segredos_roubados/formula_da_cocacola.doc #aqui nao, TOP SECRET.

No exemplo acima bloqueamos o acesso completo aos diretórios “admin” e “intranet”, e também ao arquivo “formula_da_cocacola.doc”, que está dentro do diretório “segredos_roubados”, o restante dos arquivos do diretório “segredos_roubados” está livre para ser indexado pelos buscadores.
E para finalizar, caso queira bloquear um determinado arquivo/diretório de apenas um buscador, basta ao invés do * em User-agent, escrever o nome do agente/buscador a ser bloqueado, assim:


User-Agent: Googlebot
Disallow: /admin/ #diretorio bloqueado

Oppsss acabamos de bloquear o acesso do google ao diretório “admin”.

Simples e eficaz.

Boa semana a todos!

Continuando o post Javascript: visualizar foto em tamanho maior onde passei um código bastante simples de como visualizar uma imagem em tamanho maior clicando em uma miniatura sem abrir uma nova janela, utilizando javascript controlando a DOM, e CSS.
Como disse neste primeiro post, no trabalho tenho scripts mais completos e elaborados, a maioria em italiano, ao invés de traduzir resolvi refazer e postar aqui o código mais simples e mais fácil de ser compreendido.

Como estava aqui em casa agora sem fazer nada, e cansado de ver o Pan na TV, resolvi dar uma melhorada nesse código e vou postar aqui a atualização, este código também por ser um pouquinho mais complexo vem com comentários no mesmo.

A diferença entre o primeiro e este é a inclusão do fundo escuro e transparente que bloqueia o restante do site enquanto a imagem maior está em destaque.

O link que posto de exemplo e download do exemplo é o mesmo do anterior, porém vou manter o arquivo compactado do script anterior mais simples caso seja do interesse de alguém e vou dar um número de versão para o script para caso no futuro resolve atualizar de novo, assim fica mais tranquilo para identificar, e claro, como antes continua tudo não obstrutivo.

Chega de papo furado, clique aqui para ir para página de teste e download do script.

Encontrei no site bunnyherolabs.com um tabela interessante sobre as diversas formas de pegar altura e larguras de um documento HTML em diferentes navegadores, e as diferentes formas que cada um interpreta cada comando.

A tabela pode ser vista clicando aqui.

O post sobre a forma e metodologia utilizada para montar a tabela pode ser acessado clicando aqui.

O post e a tabela estão em inglês nos links indicados, mas a tabela que é o interessante é bastante compreensivel.