Tutorial Joomla de galeria de fotos no artigo com Simple Image Gallery

AULA PASSO A PASSO DE COMO CRIAR UMA GALERIA NO JOOMLA 1.5 E 1.6 COM LIGHTBOX

Hoje iremos ensinar como criar uma galeria de fotos dentro de um artigo do Joomla 1.5 ou Joomla 1.6 utilizando o plugin Simple Image Gallery.

Download do plugin Simple Image Gallery

Com certeza o lugar ideal para procurar uma extensão de Joomla é no próprio site do Joomlahttp://extensions.joomla.org, localizamos a página do plugin e fazemos o download.

Instalando o plugin de fotos

Após baixar o plugin no site do desenvolvedor vamos em Extensões => Instalar/Desinstalar e clicamos em "selecionar arquivo", localize o pacote .zip que acabou de baixar e clique no botão de enviar arquivo e instalar.

Após o envio você receberá uma mensagem de plugin instalado com sucesso. Parabéns, agora já podemos começar a brincar com ele.

Publicando e configurando o plugin

Geralmente após o Joomla instalar o plugin ele deixa como despublicado, dessa forma o plugin não irá funcionar.

Para publicar o plugin vá em Extensões => Administrar Plugins, localize um nome semelhante a esse "Simple Image Gallery (by JoomlaWorks)" e clique nele.

No segundo campo a esquerda deixe marcado como "sim" em Habilitado e clique em aplicar no menu superior a direita, feito isso já poderemos utilizar em nosso site.

Veja abaixo as propriedades do nosso plugin:

1 => Escolha onde será a pasta raiz que irá conter todas as demais pastas comn as fotos das galerias que irá criar. No nosso caso vamos modificar para images/stories/galerias. Não esqueça de criar essa última pasta!

2 => Escolha a largura da imagem em miniatura gerada automaticamente.

3 => Altura máxima da geração da imagem em miniatura.

4 => Porcentagem da qualidade da imagem em miniatura.

5 => Se estiver desabilitado a miniatura gerada irá ter a mesma proporção da imagem original. Habilitando essa opção todas as miniaturas irão ter a mesma proporção.

6 => Mostrar ou não os textos de navegação e títulos. Clique em ocultar para não aparecer os textos.

Preparando a galeria de fotos do artigo Joomla

Antes de colocarmos a galeria no artigo é necessário que seja criado uma pasta e enviado todas as fotos da galeria para essa pasta.

Existem 2 formas para criarmos essa pasta com as fotos, uma delas é acessar um programa de FTP, conectar com o servidor do site e criar essa pasta dentro do diretório images/stories/galerias, depois de criado enviar todas as fotos para essa pasta.

A outra forma mais fácil é utilizar o gerenciador de mídas do Joomla, se você não sabe o que é ou não tem acesso ao FTP do site veja a seguir.

Criando a pasta e enviando as fotos

No menu superior do Joomla acesse Site => Administrar Mídia, na lateral esquerda você irá visualizar vários links ligados em formato tipo "árvore". Para abrir a pasta "stories" clique na lateral esquerda desse nome no sinal de "+". Após abrir clique na pasta "galerias".

Para criar uma nova galeria iremos precisar criar uma nova pasta. Atencão ao nome dado a esta pasta, não poderá ter espaço em branco e ser um nome único nesse diretório, evite também utilizar acentos e cedilhas. Esse mesmo nome será utilizado em nosso artigo como o localizador único das fotos de cada galeria.

Escreva o nome escolhido no campo semelhante imagem acima e clique em "Criar pasta".

Após a criação entre na pasta ou clicando no ícone inferior que apareceu ou pela navegação lateral esquerda.

Estando dentro da pasta utilize o campo inferior para enviar cada imagem da galeria, clicando no botão de selecionar e depois de enviar.

Após os seus envios ficará parecido com a imagem abaixo, note que em cada imagem temos um "x" vermelhor, clique nele se quiser deletar a imagem correspondente. Para remover várias ao mesmo tempo marque os checkboxes de cada uma e depois clique no menu superior direito "excluir".

Adicionando a galeria no artigo

Agora que já criamos a pasta e enviamos as fotos da galeria vamos adicionar a um artigo do Joomla.

Abra o seu artigo e no local onde deseja que apareça a galeria coloque o seguinte texto:

{gallery}galeria-demo{/gallery}

Perceba que adicionamos apenas o nome da nossa pasta no meio do código do plugin.

Salve o seu artigo e veja o resultado semelhante a esse:

Read more »

Posted in: Aulas Tutorias,Tutoriais

Tutorial em vídeo da palestra sobre Joomla CCKs utilizando o CCK Form2Content

Tutotial na prática da palestra Desenvolvendo componentes sem programar com CCKs parasites em Joomla apresentada no Joomla Day Brasil 2010 em Brasília ministrado por Leo Miranda.

No vídeo é mostro como fazer um sistema de cadastro de clientes para sites em Joomla em poucos minutos administrável via front-end. O resultado dessa aplicação pode ser vista no site da JetWorks.

Read more »

Posted in: Aulas Tutorias,Tutoriais

Template joomla grátis pode ser bonito?

Será que para o site Joomla ser bonito é preciso ter um template comercial ou personalizado? Diante da necessidade de ter um site super rápido com boa aparência resolvi escolher um template Joomla grátis que atendesse meu projeto.O resultado da busca de um template joomla grátis bonito você irá encontrar nesse artigo, boa leitura!

Desde o início da minha carreira de Joomleiro em 2006, quando o joomla ainda na estava na versão 1.0, eu desenvolvo meus própriostemplates Joomla personalizados. Na época os templates Joomla free eram muito feios, com códigos mais feios ainda e que no final das contas dava mais trabalho para deixar-lo profissional do que desenvolver um template novo.

De lá para cá apareceram diversos serviços para personalizar templates Joomla comerciais,mas nenhum para personalizar templates Joomla grátis. Alguns até já usavam templates grátis mas preferiram um novo template personalizado. Com isso minha experiência com esse tipo de template foi bastante reduzida.

Com esse novo job expresso, como é um site satélite de apoio para um projeto maior resolvi me desafiar fazer um belo site Joomla free em poucas horas. Realmente o trabalho foi feito muito rápido, graças ao grande mercado atual de template grátis com qualidade.

Agora irei dar uma dica de como ter um site Joomla com template grátis e bonito!

Compatibilidade

Template sem compatibilidade total, não se engane

Existem muitas opções de templates Joomla free, mas poucos são realmente bons, antes de escolher o template freeo seu projeto verifique se o template está compatível com os principais navegadores do mercado.

"O seu template não pode ser bonito para alguns e "tronxo" para outros. Mesmo que se apaixone, analise com carinho."

Um template bem compatível irá reduzir bastante o seu trabalho, lembre-se que infelismente a maioria dos clientes utilizar o IE, as vezes até mesmo o IE 6 (esse eu já desisti). Por isso dou a dica de testar nos seguintes navegadores: Firefox,Chrome, Opera, Safari, IE 7 e 8. O Safari tem uma renderização bem parecida com o Chrome já que ambos tem aenginer Webkit por baixo dos panos.

Bem Otimizado (SEO)

A não ser que esteje fazendo um diario pessoal privado ou uma intranet fechada acredito que o seu cliente queira que o seu site tenha o maior número de visitantes válidos possíveis. Claro que o conteúdo vai interferir radicalmente no resultado mas um código bem estruturado faz bastante diferença.

Esqueça templates antigos construídos com tabelas. Também tome cuidado com templates super-modernos com "meio quilo" de scripts para fazer uma foto girar. Assim como a nossa vida, tudo demais faz mal.

Bonito

Apesar de muitas pessoas não ter um senso do que é feio, a maioria sabe pelo menos o que é bonito. Creio que nesse aspecto não terá muitos problemas.

Compatível + Bom Código + Bonito

Sem dúvida esse é a dose certa para um ótimo projeto utilizando templates gratuitos. Onde consegui-los?

Existem muitos sites legais para voce baixar seu template Joomla bonito bem bacana, uma boa opção é olhar em sites de empresas que desenvolvem templates comerciais, geralmente eles possuem alguns bons template gratuitos. Uma maneira fácil de encontrar em vários sites é utilizar o filtro de templates do site www.bestofjoomla.com. No menu esquerdo Advanced Filter clique no link Licenses e escolha as opções gratuitas.

Tempalte Joomla grátis da RocketTheme

Uma boa pedida são ostemplates Joomla grátis da empresaRocketTheme, além de bonitos os dois último projetos são desenvolvidos com o framework de templates joomla Gantry. Uma mão na roda para você personalizar facilmente o seu template gratuito. Veja no final dessa página.

Espero que tenham curtido o artigo e ajudado na sua busca por templates elegantes gratuitos em Joomla. Para completar a minha escolha para o meu projeto foi essa do RocketTheme por ser o mais semelhante com o que eu queria. Aprovadíssimo.

E você, conhece templates gratuitos bonitos e bem feitos em Joomla? Até a próxima e obrigado pela leitura.

Read more »

Posted in: Aulas Tutorias,Tutoriais

Aprendendo como editar um Template

Este tutorial irá mostrar-lhe como começar a editar templates utilizando o que vem por padrão na versão 1.5.  Eu recomendo começar com uma instalação do Joomla simples - um site de teste.  Não tente fazer isso pela primeira vez em seu site online!

Vamos começar pelo arquivo index.php.  Ele está localizado aqui: / templates / rhuk_milkway / index.php.  Cada template tem este arquivo e ele coloca todos os diferentes elementos da página.

Ir para seusite/administrator > > Extensões > > Administrar Template e abra o template rhuk_milkyway.
Clique em " Editar HTML " no canto superior direito.  Você verá o código que contem todo o sistema principal do seu template.
Backup!  Selecione todo o código e copie-o em um editor de texto.  Salve o arquivo em algum lugar seguro.

Editando o código fonte

Este é um pequeno truque que irá trocar os módulos nas colunas da esquerda e da direita.

• Vá até no código até que você veja:                                                                                                           (Eu inseri um espaço no início e no fim de parar o código aqui)

• • Essa linha diz ao Joomla para mostrar todos os módulos na posição "esquerda ".

• Descendo, você verá:                                                                                                                             
  

• Vamos fazer o inverso do que fizemos anteriormente e mudar o nome = "right " para name = "left "
• Clique em "Aplicar "e marque a frente de seu site.

Em seguida, vamos olhar para o arquivo CSS que controla a cor, fontes, imagens e muito mais para seu template.  Houve apenas um arquivo index.php, mas muitas vezes há muitos arquivos CSS.Cada uma controla um aspecto diferente ou o estilo do modelo - por exemplo, pode-se controlar a variação do modelo vermelho, outra variação verde e um terceiro do azul.  Os designers de templates acharam melhor dividi-los em arquivos diferentes, assim você não precisa carregá-los todos de cada vez - você não tem que carregar o estilo verde e azul se você estiver usando apenas o estilo azul.

No entanto, 99 % dos designers colocaram todo o código mais importante em template.css (logicamente bem nomeado ).  Ele está localizado na pasta: / templates / rhuk_milkway / css /.

# Vá para Administrator > > Extensões> > Administrar Templates e abra o modelo rhuk_milkyway.
# Clique em " Editar CSS "no canto superior direito.
# Vá para baixo até você encontrar o arquivo template.css e abri-lo.
# Backup!  Como dito acima, selecione todo o código e copie-o para um editor de texto.  Salve o arquivo em algum lugar seguro.

Editando o código CSS Parte 1

Primeiro, vamos alterar parte do estilo do nosso site.  Vamos modificar o design dos links em nosso site:

• Vá ate no código abaixo:

a: link, a: visited {
text-decoration: none;
font-weight: normal;
}

Esta linha de código diz ao Joomla como o estilo de links em seu site.

• Vamos mudar esse código para que os nossos links serão sublinhados:

a: link, a: visited {
text-decoration: underline;
font-weight: normal;
}

Clique em "Aplicar "e volte para o seu site.

Editando o código CSS Parte 2

Em seguida, vamos mover a caixa de busca do topo esquerdo para o canto superior direito:

• Va até no código do template.css até ver:

# search {
float: right;
width: 320px;
margin-top: - 20px;
margem direita: 30px;
height: 40px;
overflow: hidden;
text-align: right;
}

• Vamos mudar esse código para que a nossa caixa de pesquisa irá se mover para a esquerda:

# search {
float: left;
width: 320px;
margin-top: - 20px;
margem direita: 30px;
height: 40px;
overflow: hidden;
text-align: right;
}

Veja o resultado:

Read more »

Posted in: Aulas Tutorias,Tutoriais