Joomla

Sumário

Introdução #

O que é um gerenciador de conteúdos(CMS) e quais são as vantagens de se utilizar um #

Gerenciadores de conteúdo
Figura. .

Conceito #

São ferramentas utilizadas de forma a simplificar o gerenciamento de conteúdo de sites e portais, exigindo menos conhecimento técnico do que ao se realizar o mesmo trabalho manualmente.

Comparação entre CMS’s e portais convencionais #

CMS Portal convencional
Flexibilidade de criação e edição de conteúdo Conteúdo inserido manualmente
Ambiente colaborativo, vários usuários podem editar Normalmente centralizado no desenvolvedor
Criação rápida de novas páginas Desenvolvimento mais demorado
Alterações realizadas mais rapidamente Alterações lentas
Edições podem ser feitas sem conhecer linguagens de programação É necessário entender HTML, CSS e, muitas vezes, Javascript

CMS’s mais utilizados #

Existem inúmeros gerenciadores de conteúdos gratuitos ou pagos no mercado, porém, valem ser citados os mais conhecidos e mais comumente utilizados:

Wordpress, Joomla!, Drupal e Magento

O que é Joomla! #

Joomla!
Figura. .

O que é #

O Joomla! é um dos gerenciadores de conteúdo open-source mais utilizados no mundo, ficando atrás apenas do WordPress.

Enquanto o WordPress é mais voltado para a produção de blogs, o Joomla!, que é mais robusto, tem por objetivo a criação de sites e portais com maior complexidade.

Na UFABC, o Joomla! é utilizado na maioria dos setores, contudo, alguns blogs foram feitos em WordPress e ainda existem até mesmo portais feitos sem utilização de CMS’s.

Comunidade Joomla! #

A comunidade Joomla! é atuante no mundo inteiro, possuindo ampla atuação no Brasil.

Por ser um software open-source, ou seja, de código livre, qualquer interessado em participar da comunidade, seja auxiliando em traduções do programa, seja desenvolvendo novas extensões, são bem-vindos.

Pré-requisitos para aprender Joomla! #

Para se utilizar o Joomla! como administrador, é necessário possuir:

  • Conhecimentos básicos de informática
  • Conhecimentos básicos de internet (saber usar navegadores)
  • Vontade de aprender

Instalação do Joomla! na UFABC #

Como criar domínios e solicitar a instalação do Joomla! na UFABC #

Acessando a Central de Serviços #

Acessar central de serviços
Figura 1 Realizando login na Central de Serviços.

Abrindo chamado #

Abrindo chamado
Figura 2 Abrindo chamado.

Como acessar a administração de um site em Joomla! #

Acessando a administração de um site em Joomla! #

Acessar a administração de site em Joomla!
Figura 1 Acessando a administração de um site em Joomla!.

Para acessar a administração de um portal em Joomla!, coloca-se, por padrão, o endereço do portal e com a terminação “/administrator”.
Exemplos:
http://nti.ufabc.edu.br/administrator
http://ufabc.edu.br/administrator

Gerenciador de usuários #

Acessando o gerenciador de usuários #

Gerenciador de usuários
Figura 1 Menu Usuários — Gerenciador de usuários.

Listagem de usuários #

Listagem de usuários
Figura 2 Lista de usuários com informações.

Criando um novo usuário #

Criando um novo usuário
Figura 3 Criação de novo usuário.

Campos para criar novo usuário #

Campos para criação de novo usuário
Figura 4 Campos de criação.

Atribuição de grupos ao usuário #

Atribuição de grupos ao usuário
Figura 5 Atribuição de grupos ao usuário.

Gerenciador de mídias #

Conceito #

O gerenciador de mídias é o gerenciador por meio do qual pode-se enviar arquivos em geral para o portal, como imagens, PDF’s, docs.

Acessando o gerenciador de mídias #

Acessando o gerenciador de mídias
Figura 1 Acessando o gerenciador de mídias.

Criando uma nova pasta #

Criação de nova pasta
Figura 2 Criação de nova pasta — Passo 1.
Criação de nova pasta
Figura 3 Criação de nova pasta — Passo 2.

Selecionando a pasta para enviar arquivo #

Selecionando pasta para enviar arquivo
Figura 4 Selecionando pasta para enviar arquivo — Passo 1.
Selecionando pasta para enviar arquivo
Figura 5 Selecionando pasta para enviar arquivo — Passo 2.

Envio de arquivos #

Envio da arquivo
Figura 6 Envio de arquivo — Passo 1.
Envio de arquivo
Figura 7 Envio de arquivo — Passo 2.

Gerenciador de categorias #

Conceito #

Categorias, no Joomla!, são formas de organização criadas de acordo com o planejamento do portal.

Por exemplo: diversas notícias diferentes relacionadas a cursos de graduação poderiam ser colocadas na categoria “Graduação”. Na categoria “Pós-graduação”, poderiam ser inseridas notícias de pós-graduação, e assim por diante.

As categorias são utilizadas para tornar a manutenção do portal menos trabalhosa, já que permitem organizar melhor o conteúdo.

Acessando o gerenciador de categorias #

Acesssando o gerenciador de categorias
Figura 1 Acessando o gerenciador de categorias.

Criando novas categorias #

Criando novas categorias - Passo 1
Figura 2 Criando novas categorias — Passo 1.
Criando novas categorias - Passo 2
Figura 3 Criando novas categorias — Passo 2.
Criando novas categorias - Passo 3
Figura 4 Criando novas categorias — Passo 3.

Gerenciador de artigos #

Conceito #

Artigos são os textos, propriamente, que serão postados no portal.

Acessando o gerenciador de artigos #

Figura 1 Acessando o gerenciador de artigos.

Criando um novo artigo #

Figura 2 Criando um novo artigo — Passo 1.
Figura 3 Criando um novo artigo — Passo 2.
Figura 4 Criando um novo artigo — Passo 3.

Inserindo imagens em artigos #

Existem duas formas de inserir imagens em artigos, cada uma delas sendo utilizada para fins diferentes.

A primeira forma tem por objetivo inserir uma imagem no corpo do texto, não sendo uma forma que padroniza as imagens.

Figura 5 Inserindo imagens pelo método 1 — Passo 1.
Figura 6 Inserindo imagens pelo método 1 — Passo 2.

Por outro lado, as imagens inseridas pelo segundo método serão utilizadas, caso se queira, vinculados a tipos de menu (será estudado futuramente). A “imagem de introdução” aparecerá na vinculação a tipo de blog com imagem, por exemplo, e a “imagem do artigo” aparecerá dentro do artigo.

Figura 7 Inserindo imagens pelo método 2 — Passo 1.
Figura 8 Inserindo imagens pelo método 2 — Passo 2.

Inserindo links para arquivos ou links gerais #

Figura 9 Inserindo links — Passo 1.
Figura 10 Inserindo links — Passo 2.

Inserindo tabelas #

Figura 11 Inserindo tabelas — Passo 1.
Figura 12 Inserindo tabelas — Passo 2.
Figura 13 Inserindo tabelas — Passo 3.

Gerenciador de menus #

Conceito #

O gerenciador de menus é o local no qual a estrutura do Portal em Joomla! é organizada.

Acessando o gerenciador de menus #

Figura 1 Acessando o gerenciador de menus.

Criando um novo menu #

Figura 2 Criando novo menu — passo 1.
Figura 3 Criando novo menu — passo 2.

Acessando o menu para criar os itens de menu #

Figura 4 Acessando o menu criado.
Figura 5 Criando um novo item de menu — passo 1.
Figura 6 Criando um novo item de menu — passo 2.
Figura 7 Principais tipos de item de menu.
Figura 8 Principais tipos de item de menu.

Gerenciador de temas #

Acessando o gerenciador de temas #

Figura 1 Acessando o gerenciador de temas.
Figura 2 Interface inicial.

Customizando temas #

Figura 3 Acessando os temas.
Figura 4 Fazendo alterações simples.
Figura 5 Realizando alterações no código — Passo 1.
Figura 6 Realizando alterações no código — Passo 2.

Vendo as posições no front-end #

Figura 7 Entrando nas opções.
Figura 8 Ativando a visualização.
Figura 9 Visualizando as posições.

Gerenciador de extensões #

Conceito #

Extensões são o termo genérico para designar módulos, componentes e plugins para o Joomla!

Elas são utilizadas para acrescentar funcionalidades ao Joomla!

Baixando novas extensões #

O principal meio para ter acesso a extensões (sejam pagas ou gratuitas) é a comunidade oficial de extensões.

Diversas extensões podem ser encontradas na comunidade, como módulos de menus, componentes de fórum, plugins para melhorar as funcionalidades do Joomla!, por exemplo.

Acessando o gerenciador de extensões #

Figura 1 Acessando o gerenciador de extensões.

Baixando novas extensões #

Figura 2 Baixando novas extensões.

Instalando as extensões baixadas #

Figura 3 Instalando as extensões baixadas — Parte 1.
Figura 4 Instalando as extensões baixadas — Parte 2.

Gerenciador de componentes #

Gerenciador de componentes #

Conceito #

Componentes são adicionais mais complexos ao Joomla!, como ferramentas de fórum, por exemplo.

Como acessar os componentes #

Figura 1 Como acessar os componentes.

Gerenciador de módulos #

Conceito #

Módulos são funcionalidades diversas inseridas nas posições do tema do Joomla! como menus, históricos de notícias, slideshow’s, mecanismos de busca, dentre outros infinitos.

Acessando o gerenciador e interface #

Figura 1 Gerenciador de módulos.

Principais tipos de módulos natos #

Figura 2 Tipos de módulo natos.

Gerenciador de plugins #

Conceito #

Os plugins são alterações nas configurações do Joomla!, seja configurando o próprio Joomla!, seja configurando seus módulos ou componentes.

Acessando o gerenciador e interface #

Figura 1 Gerenciador de plugins.

Configuração global #

Conceito #

As configurações globais definem o comportamento padrão do Joomla! para as situações. A maioria dos atributos definidos nas configurações globais podem ser redefinidas para casos específicos em outras alçadas do Joomla!

Exemplos: Definição do padrão de layout de blog definido na configuração global pode ser redefinida no gerenciador de menus (o específico passa por cima da configuração global)

Acessando o gerenciador #

Figura 1 Configuração global.

Face inicial do gerenciador de configurações globais #

Figura 2 Face inicial.

Gerenciador global – Artigos #

Figura 3 Artigos.

Portal padrão #

Figura. .

O que é #

O governo federal contratou uma empresa para fazer um portal padrão de acordo com as normas e-MAG (Modelo de Acessibilidade em Governo Eletrônico) e seguindo boas práticas de usabilidade.

Com isso, foi criado o Portal Padrão, que é um framework seguindo os padrões.

Objetivo #

Facilitar o acesso aos mais diversos públicos e facilitar o aprendizado, através de uma interface padronizada a toda administração pública (ao menos no executivo federal), porém podendo ser utilizado por qualquer esfera.

Portal padrão (Blank_page) #

Conceito #

O Blank_Page é um novo tipo de menu inserido naturalmente no Portal Padrão, com o objetivo de criar páginas mais personalizadas.

Como funciona #

Ao se atribuir um menu como Blank_page, ao se clicar no menu, uma página em branco com posições únicas é criada, permitindo maior personalização de cada item.

Exemplo #

Figura 1 Acessando o menu Assuntos.
Figura 2 Criando um novo item de menu utilizando Blank_page.
Figura 3 Atribuindo a classe da página (nome da posição nova).
Figura 4 Acessando o submenu criado pelo portal.
Figura 5 Página criada.
Figura 6 Página criada com as posições aparecendo.

Portal padrão (Mod_Container) #

Conceito #

O Mod_container é um módulo também nato do Portal Padrão que serve para fazer um melhor uso do espaço e criar novas posições personalizadas.

Como funciona #

Ao se criar uma posição com um mod_container, uma posição é dividida em três posições horizontais, podendo ser encaixados diversos módulos horizontalmente.

Também é possível criar colunas, conforme exemplo da página inicial do portal.

Exemplo #

Figura 1 Criando um novo módulo.
Figura 2 Selecionando o mod_container.
Figura 3 Configurando o mod_container.
Figura 4 Mod_container exibindo título.
Figura 5 Configurando para não aparecer o título do mod_container.
Figura 6 Posição do mod_container criada sem exibir título.

Portal padrão (Mod_Chamadas) #

Conceito #

O módulo “mod_chamadas” vem com diversas funcionalidades inclusas, como chamadas de notícias, galerias, históricos de notícias. É um módulo-chave do portal padrão e é, normalmente, inserido dentro das posições criadas pelo mod_container.

Visão geral – mod_chamadas e outros módulos importantes #

Figura 1 Identificando o módulo Banner.
Figura 2 Encontrando o banner no gerenciador de módulos.
Figura 3 Identificando outros módulos na página inicial.
Figura 4 Verificando efeito dos módulos HTML Custom.
Figura 5 Verificando o módulo últimos textos.
Figura 6 Verificando o módulo Agenda de autoridade.
Figura 7 Acessando o componente da agenda de autoridades.
Figura 8 Interface interna da agenda de autoridades.
Figura 9 Exemplo — Editoria A.
Figura 10 Exemplo — Editoria A.
Figura 11 Editoria A — Back-end.

Observação #

Como pode ser visto, o mod_chamadas possui diversas funções diferentes e formatos diferentes, de acordo com customizações realizadas dentro do módulo. Como fazer para saber?

Portal padrão (Metodologia) #

Metodologia para desenvolver com o Portal Padrão #

Como não objetivamos gastar tempo em demasia decorando inúmeros nomes e características muitas vezes dificilmente inteligíveis, faremos replicações do que os criadores do Portal Padrão fizeram em seus exemplos.

Todas as funcionalidades do Portal Padrão podem ser encontradas nas Editorias, disponíveis no menu lateral “Assuntos”.

Os artigos normais podem ser criados normalmente também, conforme os artigos do menu “Acesso à Informação”, caso o conteúdo possa ser encaixado em apenas um artigo, sem precisar customizar muito.

Exemplo prático de aplicação da metodologia #

Figura 1 Acessando o gerenciador de menus.
Figura 2 Criação de novo menu – Passo 1.
Figura 3 Criação de novo menu – Passo 2.
Figura 4 Criando novo item de menu – Passo 1.
Figura 5 Criando novo item de menu – Passo 2.
Figura 6 Criando item de menu blank page.
Figura 7 Editando o item de menu para criar posição customizada.
Figura 8 Copiando módulo de menu para o novo menu – Passo 1.
Figura 9 Copiando módulo de menu para o novo menu – Passo 2.
Figura 10 Novo menu aparecendo no front-end.
Figura 11 Reajustando as posições dos menus – Passo 1.
Figura 12 Reajustando as posições dos menus – Passo 2.
Figura 13 Menu reajustado.
Figura 14 Internamente ao submenu Exemplo 1, suas posições.
Figura 15 Wireframe (planta) do que se espera do Exemplo 1.
Figura 16 Criando novo módulo.
Figura 17 Selecionando o mod_container (criação de linhas divididas em 3).
Figura 18 Criando a primeira linha.
Figura 19 Criando a segunda linha.
Figura 20 Criando a terceira linha.
Figura 21 Verificando linhas criadas no front-end.
Figura 22 Ocultando o título dos mod_containers.
Figura 23 Verificando linhas criadas no front-end.
Figura 24 Identificando o módulo da linha 1 (Editoria D).
Figura 25 Verificando sua posição via FireBug.
Figura 26 Identificando na administração (back-end).
Figura 27 Fazendo alterações no título, posição e “Salvando como”.
Figura 28 Identificando os módulos da linha 2 (Editoria A).
Figura 29 Verificando a posição no template.
Figura 30 Identificando na administração(back-end).
Figura 31 Fazendo alterações no título, posição e “salvando como” (3x).
Figura 32 Verificando no front-end.
Figura 33 Identificando módulo da linha 3 (Editoria A).
Figura 34 Verificando a posição via FireBug.
Figura 35 Identificando na administração (back-end).
Figura 36 Fazendo alterações de nome, posição e “salvando como”.
Figura 37 Verificando no front-end.
Figura 38 Criando nova categoria – passo 1.
Figura 39 Criando nova categoria – passo 2.
Figura 40 Criando novo artigo – passo 1.
Figura 41 Criando novo artigo – passo 2.
Figura 42 Selecionando a categoria adequada para o artigo.
Figura 43 Criando novo item de menu.
Figura 44 Selecionando “Único Artigo” e o artigo recém-criado.
Figura 45 Verificando no front-end.

Portal padrão (Customização) #

Criando a customização #

Figura 1 Acessando o gerenciador de temas.
Figura 2 Verificando os temas disponíveis.
Figura 3 Selecionando os arquivos.
Figura 4 Criando um novo arquivo.
Figura 5 Configurando.
Figura 6 Acessando o novo arquivo.
Figura 7 Inserindo no template.

Desenvolvido por BetterDocs