Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

William Bruno

2° Duelo Todos contra Todos

Recommended Posts

Vamos para o segundo duelo todos contra todos.

 

Álbum de Fotos

 

código inicial

<html>
<head>
	<title>Álbum de Fotos</title>

</head>
<body>
<ul class="fotos">
<?php
function getExt( $arquivo ){
	$fim = explode( '.', $arquivo );
	return '.'.end( $fim );	
}
function getThumb( $imagem )
{
	$ext = getExt( $imagem );
	$nome = str_replace( $ext, '', $imagem );	
	
	return $nome.'_p'.$ext;	
}
	$diretorio = 'fotos/';

	$fotos = null;
	if( is_dir($diretorio) )
	{
		if( $dir = opendir($diretorio) )
		{
			while( false !== ($arq = readdir($dir)) )
			{
				$ext = strtolower( pathinfo($arq, 4) );
				if( ($ext=='jpg' || $ext=='gif' )&& !stripos( $arq, '_p.' ) )
				{		
					$style='';					
					$imagem = getThumb( $diretorio.$arq );
					list( $largura, $altura ) = getimagesize( $imagem );

					
					//title="'.$diretorio.$arq.'"
					$fotos .= "\t".'<li><a href="'.$diretorio.$arq.'" title=""><img src="'.$imagem.'" alt="" /></a></li>'."\n";		
				}
			}
		}
	}

	echo $fotos;
?>
</ul><!-- /fotos -->


</body>
</html>

Sugestões de melhoramentos:

Permitir mais de 'um álbum' (mais de uma pasta)

Validações

Separação em camadas

Orientação a objetos

Lightbox ?

Painel administrativo ? :lol:

Enfim, qualquer melhoramento será aceito.

 

Como funcionará:

 

Para postar um melhoramento ao código, é requerimento apontar qual foi o melhoramento (mesmo que seja a simples declaração de uma variável) e o motivo dele.

 

Após a postagem do melhoramento, qualquer um poderá postar um novo melhoramento, caso o autor do código que foi melhorado não concordar com o melhoramento, poderá dizer porque seu código é melhor, sem a necessidade de postar um novo código.

 

Caso não haja acordo, eu decidirei(João Neto) qual é o melhor código fazendo uma avaliação completa entre os dois. Ou seja, eu apenas atuarei como mediador, caso não haja acordo; Os participantes que farão as avaliações sobre o que está ruim e o que pode ser melhorado.

 

Vencerá o último código que, passado 7 dias de postado, nenhum outro participante postar nenhum melhoramento.

 

O objetivo:

 

Promover, entre os participantes, uma discussão saudável em busca do código "perfeito".

Apurar a capacidade de detecção e correção de erros.

Aumentar o conhecimento de todos, com a troca de experiência entre os participantes.

 

Bom, é isso...

 

Sucesso a todos. ^_^

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já que a ideia não é implementar tudo de uma vez para dar chance para os demais brincarem também, vou começar suave =)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Álbum de Fotos</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="all" href="css/default.css">
    </head>
    <body>
        <ul id="galeria">
<?php
function getExt( $arquivo ){
        $fim = explode( '.', $arquivo );
        return '.'.end( $fim ); 
}
function getThumb( $imagem )
{
        $ext = getExt( $imagem );
        $nome = str_replace( $ext, '', $imagem );       
        
        return $nome.'_p'.$ext; 
}
        $diretorio = 'fotos/';

        $fotos = null;
        if(false !== ($dir = @opendir($diretorio) ))
        {
                while( false !== ($arq = readdir($dir)) )
                {
                        $ext = strtolower( pathinfo($arq, 4) );
                        if( ($ext=='jpg' || $ext=='gif' )&& !stripos( $arq, '_p.' ) )
                        {               
                                $style='';                                      
                                $imagem = getThumb( $diretorio.$arq );
                                list( $largura, $altura ) = getimagesize( $imagem );
                
                                //title="'.$diretorio.$arq.'"
                                $fotos .= "\t\t\t".'<li><a href="'.$diretorio.$arq.'" title=""><img src="'.$imagem.'" alt=""></a></li>'.PHP_EOL;             
                        }
                }
        }

        echo $fotos;
?>
        </ul><!-- /fotos -->
    </body>
</html>

css/default.css

* {
    margin: 0;
    padding: 0;
}

#galeria {
    width: 800px;
}

#galeria li {
    float: left;
    margin: 0 10px;
    width: 30%
}

changelog:

* Adicionado DOCTYPE: Implementação de acessibilidade e padrões. Optei pelo HTML4 por não ser tão restritivo quanto XHTML.
* Adicionado Meta-HTTP de conteúdo com codificação implícita.
* Adicionado arquivo externo de CSS.
* Troca: class="fotos" -> id="galeria": Performance em CSS.
* A verificação de diretório agora acontece com apenas um IF

Compartilhar este post


Link para o post
Compartilhar em outros sites

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Álbum de Fotos</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="all" href="css/default.css">
    </head>
    <body>
        <ul id="galeria">
<?php
function getExt( $arquivo ){
        $fim = explode( '.', $arquivo );
        return '.'.end( $fim ); 
}
function getThumb( $imagem )
{
        $ext = getExt( $imagem );
        $nome = str_replace( $ext, '', $imagem );       
        
        return $nome.'_p'.$ext; 
}
        $diretorio = 'albuns/*/fotos/*';

        $fotos = null;
        foreach(glob($diretorio) as $arq)
		{
                        $ext = strtolower( pathinfo($arq, 4) );
                        if( ($ext=='jpg' || $ext=='gif' )&& !stripos( $arq, '_p.' ) )
                        {               
                                $style='';                                      
                                $imagem = getThumb( $arq );
                                list( $largura, $altura ) = getimagesize( $imagem );                
                                $fotos .= "\t\t\t".'<li class="imagem"><a href="'.$arq.'" title=""><img src="'.$imagem.'" alt=""></a></li>'.PHP_EOL;             
                        }
               
		}
        echo $fotos;
?>
        </ul><!-- /fotos -->
    </body>
</html>

default.css

* {
    margin: 0;
    padding: 0;
}

#galeria {
    width: 800px;
    margin:auto;
}

#galeria li {
	list-style:none;
    float: left;
}

.imagem{

	background-color:#F4F4F4;
	border:1px solid #DDDDDD;
	margin-bottom:30px;
	overflow:hidden;
	padding:20px 20px 15px;
	text-align:center;
	
}

 

Código gerado em meus testes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Álbum de Fotos</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="all" href="css/default.css">
    </head>
    <body>
        <ul id="galeria">

			<li class="imagem"><a href="albuns/album1/fotos/test.jpg" title=""><img src="albuns/album1/fotos/test_p.jpg" alt=""></a></li>
			<li class="imagem"><a href="albuns/album2/fotos/test.jpg" title=""><img src="albuns/album2/fotos/test_p.jpg" alt=""></a></li>
			<li class="imagem"><a href="albuns/album2/fotos/test2.jpg" title=""><img src="albuns/album2/fotos/test2_p.jpg" alt=""></a></li>
        </ul><!-- /fotos -->
    </body>
</html>

Mudanças

* Alteraçao no nome do diretorio ($diretorio)

* remoçao das funçoes open_dir e readdir para ler os arquivos

* Adiçao da funçao glob para percorrer as pastas e fazer a leitura dos arquivos

* Múltiplos albuns (criar uma pasta albuns, e dentro dela quantos albuns quiser, dentro dessa pasta criar a pasta fotos e por as fotos la)

* Melhoramentos no css

 

por enquanto é isso :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

Preciso mesmo usar a versão do poster anterior?

 

Porque eu peguei a do Evandro pra mudar, mas mudei tantas coisas que a do Imao chegou antes.

 

Enfim, em todo caso, seguem um ZIP com todas as mudanças, desde o núcleo do código até a apresentação visual, espero que gostem e melhorem :D

 

http://www.mediafire.com/?kujhzuyg5jz'>Imagem Postada

Compartilhar este post


Link para o post
Compartilhar em outros sites

Enfim, em todo caso, seguem um ZIP com todas as mudanças, desde o núcleo do código até a apresentação visual, espero que gostem e melhorem :D

 

aqui só apareceu a img, faltou linkar ela :P

Compartilhar este post


Link para o post
Compartilhar em outros sites

Preciso mesmo usar a versão do poster anterior?

 

Porque eu peguei a do Evandro pra mudar, mas mudei tantas coisas que a do Imao chegou antes.

 

Bruno, o único requerimento é que seu código fique melhor que os anteriores, você pode reescrever 100% do código, desde que o resultado atenta esse requerimento.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Enfim, em todo caso, seguem um ZIP com todas as mudanças, desde o núcleo do código até a apresentação visual, espero que gostem e melhorem :D

 

poste no fórum por favor.

 

Fica melhor, mesmo que ocupe 1 post gigante ou 3~4 posts, use a tag [ code ] e poste o código aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mesmo que ocupe 1 post gigante ou 3~4 posts, use a tag [ code ] e poste o código aqui.

 

Exatamente William, se for o caso, utilize também a tag

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

OMG :o

 

Mas eu juro que eu coloquei o link. Esse BBCode tá de onda <_<

 

Vamos lá então

 

/contest/index.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http-~~-//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />

       <title>iMasters Contest Photo Album</title>

       <link rel="stylesheet" type="text/css" media="all" href="public/css/master.css" />

       <link rel="shortcut icon" href="http-~~-//forum.imasters.com.br/favicon.ico" />

       <script src="js/jquery.js" type="text/javascript"></script>
       <script src="js/lightbox.js" type="text/javascript"></script>
       <script type="text/javascript">
       $(function() {
           $('#gallery li a').lightBox( {
           	fixedNavigation: true,
               txtImage: 'Imagem',
               txtOf: 'de'
           });
       });
       </script>
   </head>
   <body>
       <ul id="gallery">
<?php 

require_once 'albums.php';

define( 'DS', DIRECTORY_SEPARATOR );
define( 'BASEPATH', getcwd() . DS );
define( 'PICS_DIR', BASEPATH . 'fotos' . DS );

Albums::$directory = PICS_DIR;

$albums = new Albums;

$albums -> getImages();

?>
       </ul>
   </body>
</html>

 

 

/contest/albums.php

 

 

<?php 

class Albums {

   public static $directory;

   private $filter;

   public function __construct() {

       if( empty( self::$directory ) ) {
           throw new InvalidArgumentException( 'Directory must be set as string before construct Albums Object' );
       }

       $this -> filter = new Image;
   }

   public function getImages( $autoOutput = TRUE ) {

       $photos = $thumbs = array();

	foreach( new ImageFilterIterator( new DirectoryIterator( self::$directory ) ) as $info ) {

           $pathname = $info -> getPathname();

	    if( ! $info -> isDir() || ! $info -> isDot() ) {

               if( ! Image::isThumb( $pathname ) ) {

                   list( $width, $height ) = getimagesize( $pathname );

                   $photos[] = array( 'thumb'  => Dir::makeRelative( Image::getThumb( $pathname ) ),
                                      'file'   => Dir::makeRelative( $pathname ),
                                      'width'  => $width,
                                      'height' => $height );
               }
	    }
	}

	return ( $autoOutput ? $this -> output( $photos ) : $photos );
   }

   public function output( array $data = array() ) {

       $output = NULL;

       if( ! empty( $data ) ) {

           $albumLength = count( $data );

           for( $i = 0; $i < $albumLength; $i++ ) {

               $output .= $this -> spacify( 12 );
               $output .= '<li>' . PHP_EOL . $this -> spacify( 16 );
               $output .= '<a href="' . $data[ $i ]['file'] . '">' . PHP_EOL . $this -> spacify( 20 );
               $output .= '<img src="' . $data[ $i ]['thumb'] . '" alt="" />';
               $output .= PHP_EOL . $this -> spacify( 16 ) . '</a>';
               $output .= PHP_EOL . $this -> spacify( 12 ) . '</li>' . PHP_EOL;
           }
       }

       print $output;
   }

   private function spacify( $amount ) {
       return str_repeat( ' ', intval( $amount ) );
   }
}

class ImageFilterIterator extends FilterIterator {

   public function accept() {

       return in_array( Image::getExtension( parent::current() ), Image::$validExtensions );
   }
}

class Image {

   public static $validExtensions = array( 'jpg', 'png', 'gif' );

   public static $thumbSuffix = '_p';

   public static function getExtension( $filename, $includeDot = TRUE ) {

       $plus = ( $includeDot ? 1 : 0 );

       return substr( $filename, strrpos( $filename, '.' ) + $plus );
   }

   public static function isThumb( $pathname ) {
       return ( strpos( $pathname, self::$thumbSuffix ) !== FALSE );
   }

   public static function getThumb( $pathname ) {

       $ext = self::getExtension( $pathname, FALSE );

       $thumbFile = str_replace( $ext, self::$thumbSuffix . $ext, $pathname );

       return ( file_exists( $thumbFile ) ? $thumbFile : NULL );
   }
}

class Dir {

   public static function makerelative( $pathname ) {

       $pathname = str_replace( BASEPATH, '', $pathname );
       $pathname = str_replace( '\\', '/', $pathname );

       return './' . $pathname;
   }
}

?>

 

 

/public/css/master.css

 

 

/* Reset Global */

@import url( 'reset.css' );

/* Estrutura Principal */

@import url( 'structure.css' );

/* Lightbox */

@import url( 'lightbox.css' );

 

 

/contest/css/structure.css

 

 

html, body {
    height: 100%;
}

body {
    background: #141414 url('../images/bg.gif') repeat;
    color: #363636;
    font: 11px Verdana, Arial, Tahoma;
	margin: 5%;
    text-align: center;
}

/* Links */

a {
    color: #2E2E2E;
}

a:hover {
    text-decoration: underline;
}

#gallery li {
    float: left;
    list-style-type: none;
    margin: 0 10px;
    width: 30%
}

#gallery li a img {
    border: 10px solid #393939;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url( 'border-radius.htc' );
}

 

 

E, agora o link do ZIP com os arquivos "extras": Lightbox sugerido pelo William, as imagens referentes ao efeito, o behaviour pro IEca e os JavaScript's

 

Imagem Postada

Compartilhar este post


Link para o post
Compartilhar em outros sites

#gallery li a img {
    border: 10px solid #393939;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url( 'border-radius.htc' );
}

O Opera agradece por ter lembrado dele. =) (Bom, já entra pra minha lista de melhorias).

 

Edit: Faltou o motivo de ter voltado a marcação pra XHTML.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que foi devido ao meu alto nível crítico. Me dá coceira ver um código com marcação inválida, então sempre faço com XHTML Strict e configuro o HTML Validator no modo Serial, que executa vários parsers seguidamente.

 

;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

código com marcação inválida, então sempre faço com XHTML Strict

 

Mas XHTML não é mais válido que HTML.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, já aviso que respeitarei qualquer contra-argumento que for apresentado após este comentário para evitar desviar o assunto do desafio.

 

Só quero apontar 2 falhas no modo de alto nível crítico:

 

1. Documentos XHTML PEDEM o mime-type: application/xml+xhtml, senão deixa de ser um documento XHTML e passa a ser tratado como html, afinal: text/html. Qualquer parser XML embutido no navegador que seja é solenemente ignorado (você deve saber a respeito das limitações do Validator).

 

2. A partir do momento que o tornamos um documento XHTML válido, passando como cabeçalho o mime-type e também definindo a meta-http corretamente, documentos XML PEDEM a declaração xml no mínimo, de versão

 

<?xml version="1.0" encoding="utf-8" ?>

Bom, basta adicionar esta inocente marcação ANTES do <!DOCTYPE>, como pede um documento XML válido, para que o Presto opere em Quirks mode, Webkit fique doidão e o Trident sirva o arquivo como um download (bom, isso ja acontece assim que muda o mime-type). O único que se safa - com falhas - é o Gecko.

 

Nota pra quem tá boiando:

Presto - motor do Opera.

Webkit - motor do Chrome e Safari.

Gecko - motor do Firefox e muuuuuitos outros por aí.

Trident - forca do IE.

Existem ainda vários outros motivos para não utilizar XHTML, mas me agarro nestes dois que considero cruciais.

 

No meu exemplo servi um documento HTML com DTD Strict, que é tão rígido quanto um XHTML Strict, com relação ao uso e função das tags, exceto pelas regrinhas básicas de XML como double-quote-attributes, aninhamento, tags minúsculas, etc.

 

Deixo para quem for aprimorar o melhoramento do Bruno decidir se usaremos XHTML ou não, após este eu postarei melhorias (se possíveis) e respeitarei a decisão.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, apesar de saber da necessidade do prologo XML, eu fujo dele igual diabo foge da cruz há anos. :P

 

E acho que me expressei mal quanto à marcação inválida. Mas contece que, às vezes esbarramos num CAPS LOCK ou esquecemos de fechar um IMG, BR e etc. e isso me incomoda.

 

Parece frescura :lol:

 

Quanto ao MIME-Type, já testei no Validator oficial e não muda em nada estar do modo certo demonstrado ou o padrão text/html. Quanto as engine, até hoje tive a felicidade de nunca ter incompatibilidade de marcação, nem mesmo com o IEca. :o

 

Os erros originados são quase sempre de má interpretação do CSS. <_<

 

Mas deixemos o autor do desafio decidir qual será usado: HTML ou XHTML

 

P.S.: Foi impresão minha ou tu deu uma caçoada básica do meu Modus Operandi :P

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas deixemos o autor do desafio decidir qual será usado: HTML ou XHTML

 

^_^ eu pessoalmente prefiro xHTML, me incomoda poder fazer:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Álbum de Fotos</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" media="all" href="css/default.css">
    </head>
    <BODY>
<P>conteudo</P>
</BODY>
</html>
acho que fica muito feio :lol:

além de várias outras coisinhas, que em xHTML são mais legais ^_^

 

O desafio é php galera!

Eu queria esperar mais uma implementação, para brincar no código que temos atualmente.. mas vamos ver se o prazo vai deixar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Arrumar caminho dos javascript:

index.php

<script src="public/js/jquery.js" type="text/javascript"></script>
        <script src="public/js/lightbox.js" type="text/javascript"></script>
Arrumar caminhos das imagens no javascript, pois o lightbox estava sem elas:

public/js/lightbox.js

imageLoading:			'public/images/lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon
	imageBtnPrev:			'public/images/lightbox-btn-prev.gif',			// (string) Path and the name of the prev button image
	imageBtnNext:			'public/images/lightbox-btn-next.gif',			// (string) Path and the name of the next button image
	imageBtnClose:			'public/images/lightbox-btn-close.gif',		// (string) Path and the name of the close btn
	imageBlank:			'public/images/lightbox-blank.gif',			// (string) Path and the name of a blank image (one pixel)

'escrever classes, e usar códigos complicados', não é programar Orientado a Objetos.

uma classe é responsável pelos seus atributos, portanto, aplicar algum encapsulamento.

albums.php

private static $validExtensions = array( 'jpg', 'png', 'gif' );
    
    private static $thumbSuffix = '_p';
logo:

public static function get_validExtensions() {
		return self::$validExtensions;
	}
e
return in_array( Image::getExtension( parent::current() ), Image::get_validExtensions() );

:lol: e prossigamos com as melhorias !

acho sem sentido fazer identação com espaços... vamos usar \t

private function spacify( $amount ) {
        return str_repeat( "\t", intval( $amount ) );
    }
logo:

$output .= $this -> spacify( 2 );
                $output .= '<li>' . PHP_EOL . $this -> spacify( 3 );
                $output .= '<a href="' . $data[ $i ]['file'] . '">' . PHP_EOL . $this -> spacify( 4 );
                $output .= '<img src="' . $data[ $i ]['thumb'] . '" alt="" />';
                $output .= PHP_EOL . $this -> spacify( 3 ) . '</a>';
                $output .= PHP_EOL . $this -> spacify( 2 ) . '</li>' . PHP_EOL;
valor/4 -1 = novo_valor

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, antes que o desafio morra (ou eu esqueça :P ), não é necessário alterar os paths direto no JS.

 

Basta adicionar no JSON de configuração:

 

Então, no index.php:

 

<script type="text/javascript">
        $(function() {
            $('#gallery li a').lightBox( {
            	fixedNavigation: true,
                txtImage: 'Imagem',
                txtOf: 'de',
                imageLoading: 'public/images/lightbox-ico-loading.gif',
                imageBtnPrev: 'public/images/lightbox-btn-prev.gif',
                imageBtnNext: 'public/images/lightbox-btn-next.gif',
                imageBtnClose: 'public/images/lightbox-btn-close.gif',
                imageBlank: 'public/images/lightbox-blank.gif',
            });
        });
        </script>
E, aproveitando a padronização que quando fiz usei, renomeiamos get_validExtensions para getValidExtension, no melhor estilo camelCase :P

 

Já o espaçamento, optei por espaços ao invés de uma tabulação porque achei a tabulação muito grande.

 

Então para agradar gregos e troianos, adicionemos em albums.php:

 

private static $indent = array( 'enable' => TRUE, 'char' => "\t", 'repeat' => 1 );

// ...

private function spacify( $amount ) {
    return str_repeat( self::$indent['char'], intval( self::$indent['repeat'] ) );
}
Assim, cada um usa o espaçamento que melhor lhe convier.

 

;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.