cursosonlinesp.com...de internet adequado e uma base de dados, é possível obter um website sem...

84
Seja bem Vindo! Curso Joomla CursosOnlineSP.com.br Carga horária: 45 hs

Upload: others

Post on 07-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Seja bem Vindo!

Curso Joomla

CursosOnlineSP.com.br

Carga horária: 45 hs

Page 2: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Conteúdo programático:

Joomla Instalando um Servidor Web Local Instalando o Joomla Administração Workspace Configurações Globais Usuários Mídias Conteúdo Menus Componentes Templates, Cores e Imagens Bibliografia

Page 3: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Joomla Joomla (pronuncia-se djumla) é um Sistema de gestão de conteúdos (Content Management System - CMS) desenvolvido a partir do CMS Mambo. É desenvolvido em PHP e pode ser executado no servidor Web Apache ou IIS e banco de dados MySQL.

Instalar o Joomla é relativamente simples, requer apenas seguir certos passos básicos, inicialmente não envolvendo conhecimentos em linguagem de programação. Com um servidor de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa logística de acordo com a finalidade do website sem a necessidade de um conhecimento extraordinário. No entanto, o aprimoramento do website dependerá muito do conhecimento do usuário em termos técnicos, a fim de atingir certo padrão gráfico, harmônico e funcional do website.

Entre as características que o popularizam, destacam-se:

· É um software livre, ou seja, encontra-se disponível numa versão básica e gratuita; · Foi escrito com PHP e MySQL, dois dos softwares "open source" mais populares do mercado; · Dispõe de vários módulos e componentes disponíveis, a partir da base herdada do Mambo; · A sua comunidade vem crescendo, e pode se encontrar ajuda inclusive em língua portuguesa; · A cada dia vem surgindo módulos e componentes, tornando a versão básica mais rica e funcional. · A comunidade de programadores e especialistas em Joomla vem crescendo cada vez mais, facilitando-se cada vez mais a ajuda mútua; · O surgimento de feiras nacionais e internacionais tem alertado a comunidade já existente, tornando o Joomla, algo universal.

Page 4: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Instalando um Servidor Web Local Algumas aplicações que faremos em nossa apostila precisarão de um servidor WEB. Vamos instalar o WAMP SERVER. Para baixá-lo, acesse: http://www.baixaki.com.br/download/wamp5.htm Instalando o WampServer.

Basta ir clicando e avançando. Após a instalação será mostrado próximo ao relógio o ícone de seu servidor WEB.

Ao clicar sobre este ícone você terá acesso ao menu de opções de seu servidor local.

Para quem usa window 7 pode ocorrer de não iniciar o serviço. Caso isso ocorra é necessário uma pequena modificação, pois o Apache que é o servidor WEB utiliza a porta 80, precisamos mudar para a porta 82. Vá até a pasta: C:wampbinapacheapache2.2.6conf.

Abra o bloco de notas e depois arraste o arquivo httpd.conf para dentro do bloco de notas. Localize a linha: Listen 80 e mude para Listen 82.

Page 5: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Depois localize a linha ServerName localhost:80 e mude para ServerName localhost:82 .

Clique no botão do Wamp, pare todos os serviços e depois os reinicie. No seu navegador digite http://localhost:82/.

Page 6: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Instalando o Joomla Então vamos a instalação do Joomla em seu servidor.

Na pasta de seu servidor, crie uma pasta para colocarmos os arquivos do Joomla.

Baixe o arquivo que está em http://joomlacode.org/gf/download/frsrelease/17715/77262/Joomla_2.5.8-Stable-Full_Package.zip e descompacte-o dentro desta pasta.

Page 7: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Acesse HTTP://localhost/joomla .

A primeira tela é preciso definir em qual idioma você quer instalar o Joomla. A tradução para o português pode ser baixada em: http://joomlacode.org/gf/project/jtranslation/frs/?action=FrsReleaseBrowse&frs_package_id=61 .

Clique na parte superior direita no botão próximo, ele fará uma verificação de instalação.

Page 8: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Na terceira etapa é mostrada a licença de uso do CMS, clique em próximo.

Agora precisamos configurar nosso Banco de Dados. Como estamos trabalhando localmente usamos localhost e demais campos conforme imagem.

Page 9: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

A próxima etapa pede-se para definir um caminho FTP, não habilitaremos esta opção. Clique em próximo.

Configurações finais, aqui se pode carregar os dados de exemplo. Clique no botão Instalar exemplo de conteúdo.

Vá até a sua pasta e remova o diretório de instalação.

Page 10: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Acesse novamente a página inicial do seu site Joomla

Para acessar a área de administração digite: HTTP://localhost/joomla/administrator

Page 11: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Navegue entre as seções para visualizar o que veremos no curso.

Mas nossa ideia é criar um projeto do zero no Joomla, crie outra pasta, repita o processo de instalação mas não clique no botão de exemplo, ao finalizar você teria a seguinte tela de seu site Joomla.

Será neste ambiente que vamos trabalhar.

Administração Sempre que formos acrescentar, editar ou excluir, qualquer conteúdo do Joomla, é preciso entrar na área de administração.

Basta digitar na URL do navegador o endereço de acesso ao sistema, seguido da pasta administrator http://localhost:82/joomla2/administrator/

Page 12: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

O Username, use Admin e a senha que cadastrou na instalação do Joomla. E você entrará no ambiente de edição de seu site Joomla.

Características Antes de começarmos a inserir conteúdo em nosso sistema, vamos visualizar algumas características deste fantástico CMS. Na parte superior temos o menu de elementos que podemos adicionar ao Joomla. Clique em Content e depois em Article Manager.

Page 13: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

No momento não temos nenhum artigo, clique em New.

Observe que embora o editor do Joomla seja simples, ele possui as principais funcionalidades, de formatação e edição de textos.

Caso queira, você pode editar todo ele também em HTML, observe que ele possui um botão chamado HTML.

Page 14: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Este é o editor padrão do Joomla, você pode também adicionar outros editores com mais recursos.

Veremos isto mais adiante.

Outra parte de grande importância, é referente a usuários de seu sistema. Clique no menu Site, User Manager.

Page 15: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Será por esta tela que será possível definir quem poderá adicionar conteúdo ao sistema.

Outro menu bem importante é Components.

Através dele é possível criar um gerenciamento de Banners, contatos, news, enquetes, busca, web links.

Veremos como utilizar estas opções com mais detalhes mais a frente.

Page 16: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Extensões Ao clicar no menu Extension, temos como adicionar e gerenciar mais conteúdos dentro do Joomla.

Temos os módulos, Plug-ins, Templates e linguagens, onde podemos gerenciar elas para a parte administrativa e para o FrontEnd, ou seja, o que é visualizado.

Para adquirir extensões para seu sistema acesse: http://extensions.joomla.org/

Pelo menu Extensions, clique em Plug-in Manager, observe que já temos diversos plug-ins ativos.

Page 17: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos instalar uma nova extensão.

Clique em Extensions, Install / Uninstall. Podemos instalar novas extensões de três formas, buscando o arquivo em seu computador, através do caminho do diretório e através da URL de onde está a mesma.

Clique para localizar seu arquivo.

Page 18: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique no botão Upload File & Install.

Ao término da instalação você será notificado.

Instale também a linguagem do site.

A extensão foi instalada, é preciso agora aplicar ela ao site.

Clique no menu Extension, Languages.

Page 19: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Marque a opção Português (Brasil) e depois clique em Default. Observe que estamos com Administrator, será preciso repetir também isto para Site.

Observe que foi mudado o idioma de toda a administração.

Ao repetir o processo com a opção Site, atualize o navegador e veja que ele também já mudou as informações.

Page 20: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Workspace

A Workspace, como o nome diz, é janela de abertura para a administração do sistema, ele possui o menu de topo, ícones de acesso rápido, na direita temos alguns módulos prontos. Na parte direita superior podemos: Pré-visualizar, checar se temos novas mensagens, verificar a quantidade de usuários logados e desconectar-se do admin.

Podemos mudar o tema do painel de administração.

Clique no menu Extensões, Administrar Tema.

Clique na opção Administrador.

Page 21: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Marque a opção disponível e clique na direita na parte superior em Editar.

Você pode retirar as bordas arredondadas, exibir ou não o nome do site e mudar a cor do cabeçalho.

Configurações Globais Como podemos criar mais de um usuário no sistema Joomla, para se ter acesso a configuração global é preciso ser super administrador do sistema.

Na tela inicial do painel de controle , clique em Configuração Global.

Você pode também usar o menu site configuração.

Na parte superior temos as ABAS, site, sistema e servidor.

Page 22: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Podemos definir nosso site em manutenção e editar a mensagem de aviso.

Podemos mudar o nome do Site.

Definir um editor de textos e artigos.

Configurar o tamanho da lista de artigos.

Quantidade de notícias externas.

Mais abaixo podemos configurar as informações de metadados do site.

Clique em Aplicar. Será mostrada uma mensagem de confirmação.

Clique agora na ABA Sistema.

Page 23: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

A primeira informação mostrada é a palavra Secreta, abaixo temos o caminho do diretório de Log. Abaixo você tem a opção de habilitar Web Service, o servidor de ajuda depois tem o bloco de cadastro de usuários.

Na parte de baixo temos as opção de mídia.

A primeira informação disponível são as extensões permitidas, seguido do tamanho máximo, o diretório de imagens, caminho para imagens que serão utilizadas nos artigos, restringir upload, nível de usuário para acessar o editor, extensões de imagens permitidas, possibilidade de bloquear extensões, tipos de MIME autorizados e bloqueados e possibilidade de Flash Uploader.

Na direita temos mais opções de configuração.

Page 24: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Ativar depuração do sistema que permite visualizar erro durante a navegação, aconselhável somente para desenvolvedores.

Abaixo temos o bloco Cache, permite habilitar ou não a utilização do cachê no navegador do usuário.

Finalizando temos a configuração de tempo de sessão.

Clique na ABA Servidor.

Inicialmente mostra o caminho do diretório temporário do servidor, opção de compressão do site, a ideia é que o site carregue mais rapidamente, porém na prática, pouca coisa muda.

Abaixo podemos definir a forma do relatório de erros e sistema de segurança SSL.

Page 25: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Abaixo temos a configuração de fuso horário, defina como (-3:00).

Depois temos o bloco de configuração FTP, como administramos o site pelo Admin, somente habilite este serviço se for realmente necessário.

Na direita temos as configurações de Banco de Dados.

Abaixo o bloco de configurações de e-mail.

Para configurações de FTP e e-mail, talvez seja necessário verificar as configurações com seu serviço de hospedagem.

Usuários Na tela inicial do painel de controle, clique Administrar usuários.

Inicialmente temos as informações do usuário existente, no caso o admin.

Através deste painel, você verificar se um usuário está conectado, ao clicar na confirmação você poderá desconectá-lo, pode também habilitar / desabilitar um usuário.

Estando como super administrador não clique na opção Habilitado.

Na direita temos algumas opções de filtros.

Page 26: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Na parte superior direita temos o botões de desconectar. Remover, editar, novo e ajuda. Novo Usuário Vamos adicionar um novo usuário no sistema, clique no botão Novo.

É necessário preencher os campos do novo usuário. Além dos dados, é necessário definir a qual grupo este usuário irá pertencer.

Observe que ele se divide dois grupos: Site e Administração.

No grupo Site temos:

· Registrado: Terá acesso a páginas restritas. · Autor: Tem as mesmas possibilidades do registrado e pode enviar artigos. · Redator: Herda as características do Autor e pode modificar os artigos enviados.

Page 27: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

· Editor: Herda as características do Redator e pode publicar os artigos. Grupo de Administração - podem acessar a parte administrativa.

· Gerente: Acessa a parte administrativa, mas não acessa as extensões, configuração global. · Administrador: Não acessa configuração global. · Super Administrador: Acessa tudo. Na direita temos algumas configurações de idiomas, editores, etc. para o novo usuário. Não alterando nada ele herda a configuração global.

Salve seu novo usuário.

Por estarmos local ele não cria a função mail. Por isso a mensagem de erro.

Crie seu usuário como gerente , faça o login com ele, e observe que será carregado menos informações.

Page 28: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Mídias Clique no botão de Administrador de Mídias.

Na parte superior temos duas formas visualização, em miniatura e detalhada.

Na direita temos as colunas de pastas.

Page 29: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

No conteúdo central temos as pastas e os arquivos, interface muito semelhante ao que você já conhece do seu sistema operacional.

Para excluir apenas uma imagem, basta clicar no ícone de exclusão .

Caso queira excluir diversas imagens, marque-as e depois clique no botão de Remover no canto superior direito.

Todas as imagens a serem utilizadas no projeto devem ficar dentro da pasta Stories, pois foi desta forma que definimos em Configuração Global.

Se for necessário crie pastas para organizar suas imagens.

Na parte debaixo da tela temos a janela para que se possa fazer o upload da imagem.

Page 30: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Caso você tenha habilitado o Flash Uploader, pode ocorrer dele não abrir a janela de upload, caso isso tenha acontecido, retorne e desmarque esta opção. Ao finalizar o upload.

Page 31: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Conteúdo

Sempre que se projeta um site, é preciso definir uma hierarquia para o conteúdo, e com o Joomla não é diferente, na verdade com ele é ainda mais necessário.

A estrutura de conteúdo do Joomla segue a seguinte ordem: Um nível superior que é a sessão, abaixo dele tem Categoria e abaixo dela um nível chamado Artigo. Isso indica que um artigo sempre precisa de uma categoria que precisa estar ligado a sessão.

Por exemplo: Podemos ter uma seção chamada Esportes, com duas categorias, um chamado futebol e outro chamado Automobilismo. E ligados a eles os artigos. E assim sucessivamente, organizando seu projeto. Seções Vamos agora iniciar a criação de nossas seções. Clique no menu Conteúdo, Administrar Seção.

Dentro da tela de administrar seção, clique no botão Novo.

Page 32: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Agora precisamos inserir as informações de nossa seção. O título da primeira seção será Esportes.

Não precisamos preencher o campo apelido, vamos manter o status como Publicado em Sim. O nível de acesso deixamos como público.

No campo imagem, eu poderia definir uma imagem para aparecer na tela inicial, ao inserir uma imagem eu preciso definir uma posição para ela.

Abaixo temos o editor de conteúdo. Acrescente um conteúdo a esta área.

Page 33: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Você pode adicionar uma imagem ao seu artigo, clique onde quer que apareça a imagem e depois clique no botão Imagem na parte debaixo.

Page 34: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Para salvar clique em Salvar. A opção Aplicar, aplica as alterações, mas mantém a tela aberta para continuar a edição.

Agora vamos criar a nossa segunda seção que é a Institucional.

Para este caso, vamos manter a descrição em branco.

Temos agora no painel de administração da seção as duas criadas.

Na parte superior, temos os botões de Publicar e despublicar, de copiar que permite gerar uma cópia da seção, mas com outro

Page 35: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

nome, o botão de remover, de editar a seção,outra forma de editar a sua seção é clicando em seu nome, o novo e a ajuda.

Categorias Vamos agora trabalhar com as categorias, temos Futebol, Automobilismo e Institucional. Clique no menu Conteúdo, Administrar Categorias.

Na direita onde diz, selecione uma seção para as novas categorias, no caso vamos iniciar com Esportes.

Clique em Novo.

Preencha os dados.

Caso queira adicione informações no editor.

Page 36: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Depois de feito isso clique em Salvar.

Crie agora a Categoria Automobilismo.

Clique em salvar. Temos então duas categorias na seção Esportes.

Precisamos agora criar a categoria Institucional, então mude o filtro para Institucional para criar a nova categoria.

Page 37: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos deixar sem nenhum conteúdo e clique em Salvar.

Para visualizar as três categorias retire o filtro.

Os botões da direita possuem as mesmas características da seção, com exceção do Mover. Ela permite selecionar uma categoria e mover ela de seção.

Artigos Precisamos agora então criar nossos artigos e atrelá-los as categorias criadas. Clique no menu Conteúdo Administrar Artigos.

Você pode já filtrar por seção e Categoria, depois clique em Novo.

Crie uma notícia.

Page 38: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Caso queira você pode editar a sua imagem, após ter inserido a mesma no texto, clique no botão de edição da imagem.

Ajuste como precisa e clique em Update.

Você pode pelo rodapé adicionar quebras de página e um leia mais..., usaremos este recurso em outro artigo.

Caso queira marque a opção de exibir na página inicial.

Observe agora as opções que são mostradas na direita.

Page 39: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Inicialmente temos Parâmetros – Artigo, podemos determinar quem é o Autor, o nível de acesso, a data de criação, podemos determinar uma data de Publicação e uma data de encerramento.

A segunda opção que temos de configuração são os Parâmetros Avançados.

Page 40: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Todos usam a opção Usar Global, que mantém o mesmo padrão para todo o site.

A opção de chave de referência permite criar uma referência do artigo na ajuda.

E por último temos as Informações de Metadados, que permite adicionar conteúdo para os mecanismos de busca.

Abaixo temos o Robô que adicionarmos. Follow permite que a página seja indexada pelos robôs de busca, ou No Follow que não permite ser indexada pelos robôs de busca e ao final o Autor do artigo.

Page 41: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Salve seu artigo.

Na parte superior a direita clique em Pré-visualizar.

Page 42: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos criar agora uma notícia sobre Automobilismo GT3.

Por se tratar de um texto longo, acrescentei um leia mais no texto.

Salve seu artigo.

Page 43: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Crie mais dois artigos, no meu exemplo será um relacionado a futebol e mais um relacionado a automobilismo, seguindo o cronograma inicial.

Edite uma notícia que tenha leia mais, para que apareça também na página inicial , salve-a e depois clique em Pré-visualizar.

Page 44: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Publique também uma de Automobilismo.

Com isto temos a última notícia inserida como destaque e as demais abaixo em duas colunas.

Crie agora o artigo Quem Somos para a parte institucional.

Page 45: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Para o mapa, vamos duplicar o quem somos, visto que estamos trabalhando apenas um exemplo.

Na área de manutenção de seus artigos temos alguns novos botões.

Os dois primeiros o Desarquivar e o Arquivar. A opção Arquivar permite selecionar um artigo e arquivá-lo, função útil para artigos antigos que estejam em seu site. O Desarquivar faz o processo inverso.

O mais importante é o Preferências, que vai permitir que se defina as preferências relacionadas aos artigos.

Page 46: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Aqui as configurações são globais, ou seja, o que for aplicado aqui será para todos os artigos, com exceção de quando se muda na edição do artigo.

Algumas opções que podem ser interessantes, dependendo do contexto são:

· Títulos como Link: Permite que o título do artigo, também seja um link; · Exibir Navegação: Cria um link de navegação entre as notícias.

Page 47: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos administrar os artigos que devem aparecer na página inicial.

Clique em Conteúdo Administrar Página Inicial.

Podemos mudar a ordem das notícias utilizando as setas ou direto pela numeração.

Page 48: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Podemos também definir o conteúdo dos menus da página inicial.

Clique em Menu, Main Menu.

Como padrão será mostrado o Menu Home.

Ao clicar em Home, podemos definir como deverão ser mostrados o conteúdo na home.

Caso eu não queira nenhum artigo de destaque, basta colocar em seu campo como ZERO.

Page 49: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Mesma situação para Introduções, colunas e Links.

Mais a frente vamos trabalhar com menus.

Podemos excluir um artigo selecionando-o e clicando no ícone lixeira.

Mas podemos também administrar o conteúdo da Lixeira. Clique em Conteúdo, Administrar Artigos na Lixeira.

Da lixeira podemos restaurar o artigo ou remover. Ao clicar em Remover, o arquivo não permitirá recuperação.

Menus Uma das partes mais importantes do Joomla é a criação e administração de Menus. Ao iniciar um template Joomla, já temos o menu Home criado.

Temos duas áreas em nosso site que podem conter menus.

Page 50: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Para que você possa saber quais são as áreas moduladas do template Joomla digite: http://localhost:82/joomla2/?tp=1, lembrando sempre de colocar a URL de seu site.

Observe que mesmo sobreposto aparece User3.

Então vamos a criação de menus. Clique em Administrar Menus.

Page 51: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Na direita clique em Novo.

Os campos devem ser adicionados conforme a sua necessidade, com exceção do Título do Módulo, este precisa ser mod_mainmenu.

Clique em Salvar, E será mostrado então nosso grupo.

Page 52: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique agora em Extensões, Administrar Módulo.

Observe que aparece mod_mainmenu , porém desabilitado. Clique sobre ele para abrir as suas propriedades.

Configure da seguinte forma.

Page 53: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em salvar.

Clique agora em Menu, Menu de Topo.

Clique em Novo.

Clique em Artigos, será mostrado diversas opções, clique em Layout da Página Inicial como BLOG.

Page 54: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos criar o menu para chamar a Home.

Clique em salvar. Pré-visualize.

Page 55: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Tipos de Menus Temos dois grupos de menus, o topo que criamos anteriormente e o main menu. Clique em Menu Main Menu.

Clique em Novo. Clique em Artigos e depois bem abaixo, clique em Seção, e depois em Layout Padrão da seção.

Preencha da seguinte forma.

As demais opções não serão alteradas.

Clique em Aplicar e depois em Pré-Visualizar.

Page 56: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos agora criar mais dois links na parte superior de nosso modelo.

Clique em Menu, Menu de Topo.

Clique em Novo, clique na opção Artigos, cliquem Layout do Blog de Categoria.

Pois Futebol e Automobilismo são categorias.

Preencha da seguinte forma:

Aplique e Pré-Visualize.

Page 57: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Repita o processo e crie o menu para Automobilismo.

Vamos agora criar o Quem Somos.

O quem somos é um Artigo então faremos o link direto a ele. Inicie um novo item de menu.

A opção Layout de envio de artigo, permite que se possa fazer o envio de um artigo, se o usuário tiver permissão para o mesmo.

Vamos usar a opção Layout Padrão de Artigo, clique sobre ela.

Como nome defina como Quem Somos depois na direita clique em Selecione um artigo.

Page 58: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Selecione Quem Somos. Aplique e salve.

Menu para envio de artigo e Arquivar Vamos criar um item de menu para envio de artigo. Estando em Administrar Item de menu, clique em Novo, depois clique em Artigo e clique em Layout de envio de Artigo. Defina conforme a imagem e salve.

Page 59: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos criar mais um que permita visualizar os artigos mais antigos. Clique em Novo.

Clique na opção Lista de Artigos Arquivados.

Clique em Salvar. Pré-visualize.

Page 60: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Ao clicar em envie seu Artigo, será mostrada uma tela, avisando que você não tem permissão para a tarefa.

Ao clicar em notícias anteriores , por enquanto está vazio pois não temos nada arquivado.

Page 61: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Outros Menus Acesse menu, Main menu. Clique em Novo.

Inicialmente temos o grupo de Links Internos.

"Artigos" foi onde trabalhamos até o momento, a opção contatos cria um link para o componente de contatos que faz parte do Joomla.

Serão mostradas duas opções layout de Categoria (cria uma listagem de contato) e Layout de Contato (linka direto para o formulário padrão).

Page 62: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

JCE, abra a administração do editor.

Notícias Externas, permite criar links para acessar RSS de outros sites.

Enquete: Permite criar links para verificação das enquetes. Veremos mais a frente.

Pesquisar, como o nome já diz cria um link para que se possa fazer uma pesquisa.

Clique em Pesquisar e vamos adicionar este item ao nosso menu.

Salve e Pré-visualize.

Usuário permite criar links para os componentes de usuários.

Vamos criar alguns links para os usuários. Clique em Layout Padrão para Login.

Salve e Pré-Visualize seu sistema.

Page 63: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos adicionar mais um item ao nosso menu.

Clique em Novo, Usuários, Layout Padrão para cadastro.

Como título coloque Cadastre-se e clique em Salvar. Visualize o sistema.

Ele me apresentou dois avisos.

Os primeiros avisos de erro ocorreram, por que estou testando localmente, não foi possível encontrar a função mail(), o segundo é um aviso solicitando que se ative a conta.

Vamos agora cria um item de menu chamado Lembrar Senha.

Page 64: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em Novo, Usuário, lembrar senha. Clique na opção Lembrar Padrão .

Salve e visualize.

Vamos agora criar um menu para recuperação de senha, clique em Layout Padrão para Recuperação.

Page 65: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Continuando a criar nossos menus para usuários, clique em novo, depois em Usuário, escolha Layout Padrão para Usuário.

Clique em Salvar.

E finalizando os menus de Usuário, clique em Novo, Usuário, Usuário Layout de Formulário de Usuário.

Adicione o título e clique em Salvar.

Page 66: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Abaixo de Usuários, temos Weblinks, Wraper, permite chamar um site dentro de seu site.

Clique em Wraper, e vamos adicionar um link a ser aberto em nosso projeto.

Como exemplo, vou solicitar que seja aberto a página do curso WebKit do Apostilando.com.

Clique novamente em Novo, mais abaixo temos a opção Link Externo, que abre o link, mas não no seu site.

Page 67: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Abaixo temos o separador que tem a função de separar blocos dentro das opções de menu.

Ao final temos a opção Apelido que permite criar menus idênticos mudando-se apenas o apelido.

Componentes Notícias O sistema de notícias do Joomla, permite que se leia informações de RSS, recurso disponibilizado por diversos sites de notícias, tecnologia, etc. Vamos agora aprender como isso pode ser feito.

Pelo administrador de seu site Joomla, clique em Componentes, Fonte de Notícias e vamos começa com Categorias.

Clique em Novo. Dê um nome para a categoria a ser criada.

Page 68: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em Salvar.

Com a categoria criada, clique na opção Fontes.

Clique em Novo. Preencha os campos Nome, e clique em categoria, será mostrada a categoria criada recentemente.

Page 69: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Para o link é preciso copiar o link RSS de sua fonte de notícias. Para o nosso exemplo vou buscar o RSS da página do Campeonato Brasileiro, disponibilizado pelo portal globo.com.

(http://globoesporte.globo.com/dynamo/futebol/brasileirao-serie-a/rss2.xml).

Page 70: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Abaixo, você pode definir a quantidade de artigos a serem mostrados, o tempo de cachê e a ordem de seu texto.

Clique em Salvar.

Vamos agora criar um menu para que ele mostre a fonte de notícias criada.

Clique em Menu, Menu Principal.

Clique em Novo, depois em Notícias Externas clique em Categoria, Layout da Categoria. Preencha os dados de sua categoria.

Clique em salvar. Pré-visulize.

Page 71: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Vamos adicionar mais uma fonte de notícias agora sobre esportes a motor. Clique no menu componentes, Fonte de notícias, Fontes.

O link RSS é (http://globoesporte.globo.com/dynamo/motor/rss2.xml).

Salve e pré-visualize.

Page 72: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Enquetes

Um dos recursos interessantes que podemos adicionar aos nossos sites são sistemas de enquete.

O processo de criação de uma enquete é muito semelhante a qualquer outro componente que já utilizamos.

Clique em Componente, Enquete. Clique em Novo.

No título adicione a pergunta a ser utilizada. Na direita preenchas as possíveis respostas para a sua enquete.

Verifique se ela esta como publicado, caso não esteja clique para que ela fique desta forma.

Page 73: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em salvar. Agora precisamos adicionar o módulo de enquete.

Clique em Novo. Procure o módulo Votação.

Clique sobre ele. Preencha os dados.

Certifique-se que a enquete apareça abaixo do Main Menu.

Page 74: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Visualize a Enquete. Vote.

Caso você tente votar novamente, o Joomla, não vai permitir.

Page 75: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Contato Com certeza este é um componente que não precisa de uma explicação mais detalhada do que ele faz. Então vamos aprender como adicionar um formulário de contato dentro do Joomla. Clique em Componentes, Contato, Categoria.

Clique em Novo, Dê um nome a ela e clique em Salvar. Clique ao lado em Contatos.

Clique em Novo.Adicione as informações de contato.

Page 76: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Em associado, você define um usuário do site e o e-mail que recebe as informações, é justamente o que você definiu na instalação do Joomla.

Defina os campos de seu formulário.

Page 77: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Na direita clique na Guia Parâmetros do e-mail.

Você pode aqui definir filtros para seu formulário.

Após clique em Salvar.

Agora vamos adicionar um novo menu no topo chamado Contato que faça uma ligação com nosso formulário.

Clique em Menu, menu de topo.

Selecione Layout de Contato Padrão.

Preencha o título, em exibir, certifique-se que está Menu de Topo e em Selecione Contato escolha o contato criado.

Page 78: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em Salvar. Pré-visualize.

Se você quiser adicionar mais informações a página de contatos, clique em Componentes, Contato, Contato.

Será mostrado o contato criado.

Clique sobre ele e adicione informações.

Page 79: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa
Page 80: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Artigos Relacionados Artigos relacionados no Joomla é a possibilidade de se relacionar palavras chaves em diversos artigos de seu site. Clique em Extensões, Administra Módulo, será mostrado todos os módulos que já usamos, clique em Novo.

Serão apresentados todos os tipos de módulos existentes, clique sobre Artigos Relacionados.

Clique nesta opção.

Preencha os dados de nosso novo módulo.

Page 81: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em Salvar. Se você Pré-Visualizar, ele já deixa o espaço da direita, mas não apresenta nada. Precisamos agora definir quais serão as palavras relacionadas.

Clique no Menu Conteúdo, Administrar Artigos.

Abra um dos arquivos que você criou anteriormente.

Abra a propriedade Informações de Metadados.

Repita o processo para outras notícias.

Clique no título de uma notícia, ou na opção Leia mais, observe que agora ele mostrará a direita, outros artigos que contenham palavras relacionadas.

Page 82: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Breadcrumbs Breadcrumbs, ou “Migalhas de Pão”, a associação é justamente com a fábula de João e Maria, pois ele mapeia o caminho que vocês percorreu para chegar até determinado link, é com certeza um dos maiores recursos de Usabilidade de um site. Vamos agora aprender como criá-los com o Joomla. Clique em extensões, Administrar Módulos. Clique em Novo. Clique em Breadcrumbs.

Preencha os dados, este template possui a posição Breadcrumb, será nela que vamos adicionar o nosso componente.

Page 83: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Clique em Salvar. Pré-visualize.

Templates, Cores e Imagens Como foi possível ver até o momento trabalhar com o Joomla é fácil , rápido e seguro, mas como criar para o Joomla?

Você pode criar seu próprio template, será necessário um grande conhecimento em HTML, CSS e uma boa base de PHP. Não vamos trabalhar com isso em nosso curso, principalmente pela grande quantidade de templates que podem ser encontrados para download.

O modelo que está sendo utilizado é marcado com um estrela. Marque Bezz e clique na parte superior em Padrão. Depois pré-visualize.

Page 84: CursosOnlineSP.com...de internet adequado e uma base de dados, é possível obter um website sem erros e absolutamente seguro, onde é possível editar conteúdo obedecendo-se certa

Bibliografia

• Apostila Joomla - por Marcos Paulo Furlan • http://blog.joomtus.com/search/label/Curso%20B%C3%A1sico%20

• http://www.joomlaclube.com.br/

• http://www.joomlabr.org/

• http://www.numaboa.com.br/informatica/tutos/joomla

• http://www.youtube.com/user/SomosJoomlaBr