Galeria de fotos com miniaturas dinâmicas e comentários

Introdução

Salve galera! Hoje começaremos a desenvolver uma galeria de fotos simples com comentários (a estrutura é parecida com a de um fotolog) e que gere as miniaturas das fotos automaticamente. Vou dividir em partes a matéria para ficar mais fácil a compreensão. Os códigos são feitos “na unha”, ou seja, vamos escrever os códigos. Isso é importante para realmente entender o PHP.

Para desenvolver esta galeria utilizo o PHP em conjunto com MySQL. Nessa coluna também estou explicando algumas funções muito úteis do PHP. Bem útil para quem está começando a desenvolver sistemas usando o PHP.

Pré-Requisitos

Conhecimentos básicos de PHP e MySQL.

Conteúdo

Antes de tudo, vamos criar o banco de dados. Eu vou chamá-lo de mxgaleria. Para isso, vamos executar o seguinte comando SQL:

CREATE DATABASE ‘mxgaleria’

Com nosso banco de dados criado, é hora de partir para criação das tabelas. O objetivo dessa galeria é que possamos postar fotos e os usuários possam comentá-las. Pensando dessa forma, teremos duas tabelas. Uma tabela para armazenar os dados das fotos e a outra para armazenar os comentários. Nessa coluna eu não irei criar uma área para login, tendo em vista que já temos muitas colunas falando sobre o assunto. Dessa maneira eu não usarei uma tabela para armazenar os usuários. Vamos criar as tabelas:

CREATE TABLE ‘mxcomentarios’ (
‘comentario_id’ int(11) NOT NULL auto_increment,
‘comentario_nome’ varchar(100) NOT NULL,
‘comentario_texto’ longtext NOT NULL,
‘comentario_foto’ int(11) NOT NULL default ’0′,
PRIMARY KEY (‘comentario_id’)
); CREATE TABLE ‘mxfotos’ (
‘foto_id’ int(11) NOT NULL auto_increment,
‘foto_titulo’ varchar(100) NOT NULL,
‘foto_desc’ longtext NOT NULL,
‘foto_caminho’ varchar(255) NOT NULL,
‘foto_thumb’ varchar(255) NOT NULL,
PRIMARY KEY (‘foto_id’)
)

Vamos às explicações. Tabela mxcomentarios:

comentario_id: campo com o código para controle dos comentários. comentario_nome: campo que armazena o nome de quem comentou.
Limitei o tamanho do campo para 100 caracteres.

comentario_texto: campo que guarda o texto do comentário. Note que o tipo do campo é longtext. Usei esse tipo porque permite armazenar até 4.294.967.295 caracteres. Você pode ajustar para o tipo que achar melhor.

comentario_foto: campo com o código da foto que está recebendo o comentário.

Agora, vamos à tabela mxfotos:

foto_id: campo com o código para controle das fotos. foto_titulo: campo que guarda o titulo da foto.

foto_desc: campo que armazena a descrição da foto. Assim como o comentário das fotos, o tipo de dado é longtext.

foto_caminho: campo que guarda o caminho para a foto. No banco de dados iremos guardar apenas o caminho da foto para exibi-lá.

foto_thumb: campo que guarda o caminho para a miniatura da foto que o sistema irá gerar automaticamente.

Pronto, nosso banco de dados está criado e entendido. O próximo passo é configurar nosso site no Dreamweaver. É importante você ter o site configurado pois fica mais fácil de testar nossos códigos. Vou passar bem rápido por esta parte. Para estudar mais a fundo o Mange Sites, veja os links abaixo:

Desvendando o Manage Sites
Desvendando o Mange Sites – Parte 2

Desvendando o Mange Sites – Parte 3

1 – Primeiro passo é definir o nome do site. Eu escolhi mxGaleria, escolha um nome fácil para identificar facilmente depois. 2 – Coloque o diretório raiz do site, onde estão os arquivos.

3 – Defina aqui o modelo do servidor. Nós estamos usando PHP e MySQL. 4 – Aqui escolhemos o tipo de acesso. Como o servidor está rodando na sua máquina, o acesso é Local

5 – Escolha o caminho do diretório onde estão os arquivos.

6 – E por fim definimos a URL. É importante para quando nós testarmos o site.

Pronto, com tudo definido, finalmente, vamos começar a programar. Agora começa a diversão. Vamos abrir a conexão com o banco. Nós criaremos um arquivo exclusivo para a conexão que será incluído nas outras páginas. Mas por que isso? Vamos imaginar que estamos trabalhando com um projeto grande e que ele tem cerca de 300 páginas (!!). Nós abrimos uma conexão em cada página. Um belo dia o servidor é trocado. Imagine trocar o nome do servidor, o login e a senha em 300 páginas. Bem mais fácil criar 1 página e, quando ela for atualizada, todas as demais também serão.

Crie um novo arquivo(Ctrl + N), escolha Dynamic Page > PHP. Vá para o modo de Código e limpe todo o código, apague todo o HTML. Agora vamos ao código:

<?php $host = “localhost”;
$user = “root”;
$pass = “”;
$db = “mxgaleria”;

mysql_connect($host,$user,$pass) or die(“Erro ao conectar”);
mysql_select_db($db) or die(“Erro ao selecionar o BD”);

?>

Salve essa página. Eu vou salvá-la com o nome de conn.php.

Nessa coluna eu não vou entrar em detalhes sobre o HTML da página. Então vou disponibilizar para download as páginas. Clique aqui para baixar as páginas.

Na próxima coluna iremos trabalhar a área de gerenciamento das fotos.

Considerações finais

Nessa colunas preparamos o ambiente de trabalho no Dreamweaver e criamos o banco de dados que usaremos e a conexão com o mesmo. Na próxima coluna trabalharemos a área de gerenciamento das fotos. Vamos postar a foto e criar sua miniatura dinamicamente.

Até a próxima!

Autor: Leonardo Vallim – Colunista MXSTUDIO

Qualquer dúvida acesse o nosso fórum .

Desenhando personagens

Salve galera! Todo bem com vocês?! Espero que sim. Venho em mais uma coluna falando sobre a criação de personagens. Dessa vez trago à vocês uma maneira simples de se criar uma personagem direto no Fireworks. Gostaria de aproveitar esse meu último domingo antes da minha semana de provas começar na facul para trazer pra vocês o que mais gosto de fazer, que é criar ilustrações. Para essa criação, é necessário que se tenha uma noção básica sobre utilização das formas no Fireworks, Rectangle Tool() e Elipse Tool().

Vetor – Parte 1

Com essa coluna tenho a intenção de ajudar todos vocês a criarem ilustrações para seus sites, apresentações, etc. Essas ilustrações costumam deixar as coisas mais interessantes, além de desenvolver a criatividade de vocês, exercitando-a com esse tipo de criação, afinal, através dessa personagem, abre-se um leque de milhões de possibilidades de criação.

Vamos a criação!

1) Desenhe no palco uma elipse semelhante a da figura abaixo. Eu preenchi a elipse com a cor #99CC00. Como eu sempre digo, não siga a risca o tutorial, use sua criatividade e utilize outras cores. Depois vá ao painel Layers e renomeie-a para “Rosto“. Vamos renomeando as layers para facilitar nosso trabalho mais a frente.

2) Agora vamos a criação dos olhos. O primeiro passo a se seguir é desenhar uma nova elipse sobre o rosto. Agora, vamos ao painel de propriedades (Properties) e completar da seguinte forma: o preenchimento da elipse será branco e a cor da sua borda será a mesma do rosto, no nosso caso #99CC00 e deixe sua espessura em torno de 3. O resultado será semelhante à figura abaixo. Lembre-se de renomear a layer que criamos para “Olho“.

3) Trabalharemos agora na expressão do nossa personagem. Vamos irrita-lo um pouco. Use a Subselection Tool ( ), selecione o ponto de cima da elipse. Agora vamos modifica-la de forma que assuma a seguinte forma:

4) Vamos a criação da íris. É bem simples. Ela é composta de 3 elipses. Uma mais escura que ficará no fundo e 2 mais claras, que são os reflexos na íris:

Agrupe as 3 elipses e renomeie a layer do grupo para “Íris“.

Até agora temos 3 layers, ” Rosto“,”Olho” e ” Íris“, e um resultado perto deste:

6) Agora, vamos criar o outro olho da nossa personagem. É um passo bem simples. Selecione as layer “Írir” e “Olho” e duplique-as (Ctrl+Shift+D). Agora selecione somente a layer duplicada “Olho“. Depois, clique com o botão direito e vá em Transform>Flip Horizontal (lembrando: somente transforme a layer “Olho“, a “Íris” será apenas duplicada.

Agora teremos esse resultado:

Estamos quase chegando ao final dessa criação.

7) Chegou a hora de fazer a boca. É um passo bem rápido. Faça um circulo semelhante a este:

Lembrando, deixe a espessura da borda em cerca de 3 e com a mesma cor utilizada para fazer o rosto. Renomeie a layer para “Boca“. Encaixe onde preferir. Eu encaixei da seguinte forma:

Chegou a hora de finalizar o trabalho. Agora vamos selecionar as seguintes layers: “Rosto“,”Olho“,”Olho“(a layer duplicada) e “Boca“. Com elas selecionadas, vamos duplica-las(Ctrl+Shift+D). Depois disso vá ao menu Modify>Combine Paths>Union. Agora transformamos as copias dessas layers em apenas 1. Vamos leva-la para trás de todas as outras.

Agora com a layer que acabos de criar selecionada e atrás de todas as outras, vamos escolher uma cor escura para a borda e definir sua espessura para mais ou menos 10. Com isso fizemos a borda do desenho:

Bem, é isso galera, desenhamos nossa personagem. Vocês podem fazer alguns acabamentos no desenho pra deixa-lo um pouco mais atraente, veja como ficou com algum acabamento o desenho:

Trabalhem a criatividade de vocês, modifiquem o desenho, façam outras expressões. Sei que vai sair muita coisa boa!

Gostaria de aproveitar essa oportunidade e convidar vocês a visitarem meu DeviantArt para verem meus novos trabalhos.

Espero ter ajudado vocês! Abração galera e até a próxima!

Autor: Leonardo Vallim- Colunista de Fireworks do MXSTUDIO

Qualquer dúvida envie um email para leo.vallim@hotmail.com ou acesse o nosso fórum.

Criando seus ícones

Introdução
Salve comunidade MxStudio! Eu recebi alguns pedidos de ajuda, pelo msn, sobre a criação de ícones e resolvi fazer minha segunda coluna aqui no portal MxStudio sobre esse tema.

Pré-requisito
Para essa criação, é de grande importância que se tenha, no mínimo, uma noção básica sobre o uso das ferramentas de vetor do Fireworks .

Desenhando Objetos Vetoriais
Vetor – Parte 1
Vetor – Parte 2

Objetivos
O objetivo dessa coluna é fazer com que o usuário crie icones para a navegação de seu site, sem precisar utilizar imagens copiadas de outros sites, além de familiarizar ainda mais com a Pen Tool. O resultado dessa coluna será este:

Criação do ícone “home”
Vamos, então, à criação do primeiro ícone que, na maioria dos sites, é usado para criar o link para a primeira página do site.

1) Selecione a Pen Tool( atalho ), defina uma cor escura para a borda (nesse exemplo, eu utilizei a cor #0C6489) e escolha o preenchimento. Veja na figura abaixo como defini o preenchimento:

Lembrando, não siga 100% a forma que eu estou fazendo, estou mostrando somente para uma questão de estude. Exercite sua criatividade, utilize outros preenchimentos, outras cores. Pode parecer bobeira falar isso, mas muitos segem ao pé da letra e acabam não exercitando a própria criatividade.

2) Agora, continuando com a pen tool selecionada, vamos demarcar os pontos da casa:

3)Agora vamos duplicar a layer em que a casa foi desenhada e selecionar a primeira layer

4)Nesse passo, nós iremos criar o telhado da casa. Aumente o zoom para 400% para facilitar esse passo. Para começar a fazer o telhado, aumente o tamanho da layer selecionada, de forma que a layer duplicada fique no centro da que você aumentou. Agora, com a Subselecton Tool ( atalho ), vá selecionando os pontos e arraste-os, até sentir que ficou com a aprência de um telhado. Veja como fiz com o meu:

5)Agora, vamos ao acabamento, desenharemos a porta e a janela. Selecione a Rectangle Tool ( atalho ) e faça o acabamento:

Terminamos a criação do nosso primeiro ícone: . Vamos para a criação do segundo.

Criação do ícone “contato”
Agora vamos seguir para a criação de um ícone muito usado para fazer o link com a página de contato dos sites.

1)Para começar a construção vamos selecionar a Elipse Tool ( atalho “U”). Agora faça um elpse semelhante a da figura abaixo:

2)Selecione a Subselection Tool () e arraste o ponto de baixo da elipse até ficar com um formato parecido com este:

3)Agora, novamente com a Elipse Tool () faça um outro circulo sobre este que temos:

4) Vamos ao acabamento agora. Novamente com a Elipse Tool, faça um circulo menor ao lado do circulo da cabeça, como se fosse o fone no ícone:

5)Por último, vamos fazer o microfone. Selecione a Pen Tool e faça uma linha, como se fosse o microfone:

E assim terminamos o segundo ícone: .

Ícone de dúvida ou atenção
Finalizando, vamos aproveitar a criação do ícone de contato e, através dele, criar 2 ícones semelhantes.

1) Selecione o corpo que fizemos no ícone de contato:

2) Agora com a Text Tool () finalizamos nossos ícones, inserindo um ponto de interrogação (?) ou exclamação (!). Veja o resultado: e .

Concluindo
É isso galera, tentei trazer para vocês a criação de alguns ícones para que vocês possam usar no site de vocês. Mas minha intenção é fazer com que todos os usuários usem sua criatividade (pois apartir dessa coluna você pode criar outros ícones), que é o mais importante na criação de imagens e sites para a web.
Gostaria de aproveitar essa oportunidade e convidar vocês a visitarem meu portfólio, que é meu novo projeto desenvolvido em JS, e meu DA para verem meus novos trabalhos.

Espero ter ajudado vocês! Abração e até a próxima!

Autor: Leonardo Vallim- Colunista de Fireworks do MXSTUDIO

Qualquer dúvida envie um email para leovallim@mxstudio.com.br ou acesse o nosso fórum .

Criando um personagem – Criando cabelo

Introdução
Estou enviando minha primeira coluna de Fireworks aqui no MxStudio. Vou trazer para vocês uma técnica de vetor que eu uso muito: o vetor no estilo cartoon, espero que seja util para vocês. Vou apresentar primeiro a técnica que e uso para criação do cabelo dos personagens, dando um efeito de profundidade e brilho.

Pré-requisitos
Para essa coluna é necessário que você tenha dominio da pen tool. É recomendado também (porém não indispensável) que se saiba desenhar.

Desenhando objetos vetoriais

Atalhos da Pen Tool

Arquivos utilizados

Joe.png

Objetivos
Nessa coluna vou trazer como dar um efeito de relevo ao cabelo de um personagem.

Passo 1:
Eu estou trabalhando com um desenho vetorial que eu já havia feito. Estarei tilizando técnicas para acabamento.
O primeiro passo para fazer esse efeito no
cabelo é duplicar a layer do cabelo. Com isso vamos dar a sensção de contorno mais claro no cabelo, unido com o contorno escuro.

Passo 2:
Agora, com a Subselection Tool(Passo 3:
Agora, com a Pen Tool faça uma
forma parecida com essa que eu fiz no quadro
abaixo. Aqui siga a sua criatividade e
sua paciencia. Vá fazendo curvas, a quantidade que você achar necessária. Isso vai dar uma sensação de
relevo quando nós terminarmos. Lembre-se de
usar uma cor bem mais clara.

Passo 4:
No painel de propriedades(Properties), com
a forma que você acabou de fazer selecionada,
deixe dessa forma: Edge – Feather > 10 e vá
deixando transparente até você achar que
está bom. Varia de vetor para vetor.
Eu usei para esse trabalho 35.

Passo 6:
Agora, novamente com a Peen Tool, faça a
sombra na parte de baixo do cabelo da mesma
maneira que fez a parte mais clara. Use
Feather e transparência novamente, mas com
uma cor mais escura.

Bom, é isso. Nesse artigo eu trouxe para vocês uma das técnicas para fazer acabamento em um desenho vetorial, fazendo seu cabelo. Espero ter sido útil para você e até a próxima.

Autor: Leonardo Vallim- Colunista de Fireworks do MXSTUDIO

Qualquer dúvida envie um email para leovallim@mxstudio.com.brr ou acesse o nosso fórum .