Antes de começar meu tutorial sobre o mural de fotos, vou contar uma pequena histórinha. Em 2004 foi o casamento do meu irmão do meio, e resolvi presentear os noivos com um site álbum de fotos. Na época tinha muito pouco conhecimento em PHP, e o site foi praticamente inteiro em HTML, com excesão dos comentários. Como tinha pouca experiência, inseri o código inteiro dos links das fotos na mão, passei 2 dias fazendo isso. Alguns anos mais tarde, com mais experiência, resolvi reformular alguns sites antigos e o do meu irmão foi um deles. No primeiro momento pensei em cadastrar todas as fotos em um banco de dados mas isso levaria tempo, porque eram muitas fotos. Como as fotos estavam devidamente ordenadas por números, pensei em outra alternativa: Abrir as pastas das fotos.
Veja o código simplificado abaixo:
<?$dir=$_GET["pasta"];if($folder=opendir("$dir/fotos/mini")){$i=1;while(($arquivos=readdir($folder))!=false){if($arquivos=="." or $arquivos==".."
or $arquivos=="Thumbs.db")continue;{if($i<10)$i="0".$i;$lista.="<li><a href='popup.php?Foto=$i
&Pasta=".$dir."' class='popup'>
<img src='".$dir."/fotos/mini/foto".$i."mini.jpg
alt='' border='0'/></a></li></n>";$i++;}}closedir($folder);}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title><?=$dir?></title>
</head>
<body>
<ul>
<?=$lista?>
</ul>
</body>
</html>
Onde a variável $dir (linha 2) recebe uma variável GET que corresponde ao nome da pasta que contém as imagens. A estrutura das imagens nas pastas é a mesma, ou seja, as imagens tem o mesmo padrão de nome. Após receber o nome da pasta, nós vamos abri-la com a função opendir() (linha 3),ler todos os arquivos do diretório com a função readir() e jogar esse conteúdo num loop while (linha 6).Depois é so ir concatenando o conteúdo numa variavel, no nosso caso a variável $lista(linha 10) e mandar imprimir no html (linha 27). Não podemos esquecer de fechar o diretório com a função closedir() (linha 17), pois desta forma a memória que foi usada para abrir o diretório será liberada e nosso código ficará mais leve para ser carregado. E pronto, temos uma solução simples de mural sem o uso de uma banco de dados. Espero que tenham gostado, um grande abraço.
Há algum tempo, quando postei o vídeo do iPhone que encontrei no YouTube, percebi que meu firefox mostrava que o código da tag <embed> não era válido pela W3c, então procurei no nosso amigo Google uma alternativa que tornasse o código do vídeo válido e que o mostrasse corretamente tanto para Firefox como IE 6. A primeira solução que encontrei criava um código que funcionava para Firefox e outro para IE, não achei que fosse o melhor. Procurando um pouco mais no nosso querido amigo, encontrei neste blog uma solução mas fácil e menor. Este foi o vídeo que peguei no Youtube (porque adoro gatos), que me fornece um código assim:
Muita gente confunde esses 3 conceitos como sinônimos, que embora estejam intimamente ligados, tem definições diferentes. Tentarei explicar resumidamente cada uma delas.
Tableless
Metodologia de criação de páginas sem a utilização de tabelas para a composição de layouts, geralmente com uso de Divs. Isso não significa que quando você desenvolve uma página tableless você não possa usar mais tabelas, mas sim usá-las para sua verdadeira função, a de mostrar dados tabulares, como por exemplo, uma tabela de preços.
Web Standards
Termo que se refere aos padrões web como um todo e não somente linguagem de Marcação (HTML, XHTML) e CSS. Estes padrões foram definidos pela W3C a fim de terminar com a guerra dos browsers e organizar melhor o código para facilitar seu entendimento.
Semântica
A semântica serve para estruturar e nomear elementos corretamente dentro dos padrões web. Um título de uma página pode ser escrito como <div class=’titulo’>Titulo </div> que ele estará seguindo o padrõ determinado pelo W3c, mas será que eleé semanticamente correto? A resposta é não, para isso termos as tags de Títulos(h1,h2,h3), onde para um título principal utiliza-se a tag <h1> e um subtítulo a tag <h2>. Outro exemplo é quanto a utilização de nomes para classes e IDs. Uma classe estará melhor estruturada semanticamente quando seu nome condiz a sua funcionalidade do que os atributos que ela contém. Um link para paginação seria melhor estruturado com o nome de œPaginacao do que LinkAzul.
Fazendo uma análise do que foi abordado, um site cheio de Divs aninhadas pode até ser considerado tableless, assim como um site estruturado em tabelas com elementos e atributos válidos segundo a W3c também é um site web Standards (difícil pensar nisso, mas é verdade). Além desses exemplos e de outros apresentados podemos perceber que estruturar estas 3 regrinhas básicas para criar páginas acessíveis não é tarefa fácil, mas não é impossível. O que você deve ter em mente é que esses conceitos, embora distintos, devem ser utilizados juntos para uma melhor interação entre máquina e humano, com a finalidade de melhor entendimento entre ambos e que também é conhecida como usabilidade, mas isso é assunto para outro Post.
