Joomla

André Rossiter
webrossiter@gmail.com

André Rossiter


André Rossiter

Índice
Introdução ............................................................................................................................. 3

O que é CMS .......................................................................................................................... 4

Introdução Joomla ................................................................................................................. 5

A estrutura do Joomla ............................................................................................................ 6

Como contratar uma hospedagem ........................................................................................ 8

Como instalar no Servidor UOLHOST ..................................................................................... 9

O painel de controle ............................................................................................................. 10

Menu configuração geral ...................................................................................................... 16

Menu configuração usuário .................................................................................................. 19

Arquitetura da Informação ................................................................................................... 21

Seção, categoria, artigo e menu ........................................................................................... 28

Plug in, complementos, temas, extensões, FTP ................................................................... 38

Artisteer – Como fazer o meu template ............................................................................... 50

Instalando o Joomla no FACEBOOK ...................................................................................... 66

André Rossiter

Introdução

A rede mundial de computadores pela internet tem revolucionado a maneira de empreender,
se relacionar, comunicar, trabalhar, etc...

Estar a par da melhor maneira de tirar proveito das novas tecnologias pode ser o diferencial
para se estabelecer no mercado de trabalho, ganhar dinheiro sem sair de casa ou até mesmo
os dois.

O presente curso visa ilustrar o Joomla como forma de empreender e desenvolver sistemas
para rede mundial de computadores, de forma simples através de sua tecnologia moderna e
funcional em pouco tempo.

André Rossiter

O que é CMS

CMS é a abreviação da expressão da língua inglesa (contente management system – sistema
de gerenciamento de conteúdo).

A plataforma CMS é open source (código fonte aberto) o que permite o desenvolvedor
manipular as aplicações deste sistema para suas necessidades sem custos adicionais.

Na verdade os sistemas CMS tem revolucionado a maneira de empreender na web, pois são
feitos por programadores e desenvolvedores ao redor do mundo eleitos por meritocracia e
viabilizam cada vez mais com menos conhecimento desenvolver sistemas e aplicações
complexas de serem feitas do zero.

Outra grande vantagem deste tipo de sistema é que pessoas muito capazes como descrito
anteriormente ao redor do mundo trabalham em conjunto na evolução de segurança e
interface deste sistema.

Obter todos os recursos disponíveis em qualquer plataforma CMS do zero custaria muito caro,
sendo assim outra grande vantagem de se utilizar CMS é o baixo custo de sua implementação
o que pode ser repassado para o cliente e torna os empreendimentos mais viáveis.

André Rossiter

Introdução Joomla

“Desenvolvido a partir do Mambo. É escrito em PHP e roda no servidor web Apache ou IIS e
banco de dados MySQL.” (Wikipedia).‫‏‬

Características principais

 Código aberto (Licença GPL);
 Sistema simples de fluxo de aprovação;
 Arquivamento para conteúdo não utilizados (Lixeira);
 Gerenciamento de banners;
 Sistema de publicação para o conteúdo;
 Sumário de conteúdo no formato RSS;
 Busca otimizada (qualquer palavra registrada);
 Frontend já traduzido em várias línguas;
 Fácil instalação para novos templates, módulos e componentes;
 Hierarquia para grupos de usuários;
 Estatísticas básicas de visitantes (existem módulos mais complexos que podem ser
adicionados);
 Editor de conteúdo WYSIWYG;
 Sistema de enquete simples (com acompanhamento de resultado em tempo real);
 Sistemas de índices de avaliação;
 Extensões livres em diversos sites (Módulos, Componentes, Templates, Traduções).
 Compatibilidade com versão anterior.

(Wikipedia)

André Rossiter

Google Trends é uma ferramenta do Google Labs que mostra os mais populares termos
buscados em um passado recente.

A ferramenta apresenta gráficos com a frequência em que um termo particular é procurado
em várias regiões do mundo, e em vários idiomas. O eixo horizontal do gráfico representa
tempo (a partir de algum tempo em 2004), e o vertical é com que frequência é procurado um
termo, globalmente. Também permite o usuário comparar o volume de procuras entre duas
ou mais condições. Notícias relacionadas aos termos buscados são mostradas ao lado e
relacionadas com o gráfico, apresentando possíveis motivos para um aumento ou diminuição
do volume de buscas.

(Wikipedia)

Grafico comparativo Joomla e outros CMS pelo GOOGLE TRENDS

André Rossiter

A estrutura do Joomla

O Joomla possui uma interface front end (design) do lado cliente desenvolvida pelo HTML e
CSS, possui em seu back end (programação) um sistema seguro utilizando PHP (linguagem de
programação orientada ao objeto) e um banco de dados MYSQL onde são armazenados os
dados inseridos e atualizados do Joomla.

Esta é na verdade a estrutura de um sistema para internet mais complexo e se repete para
diversos outros sistemas, mas cabe bem ao Joomla e corresponde a forma como ele foi
desenvolvido.

André Rossiter

Como contratar uma hospedagem

Recomendo um servidor grande, pois oferecem suporte 24hs, possuem manutenção com
maior frequência que servidores pequenos e de um modo geral as máquinas são mais
modernas e para finalizar o que acredito ser o mais importante é a estrutura de segurança
quanto aos aspecto de redes na sua configuração.

Você deve contratar uma hospedagem do tipo LINUX, pois trabalha bem com aspectos
relacionados a plataforma e estrutura do Joomla como vimos anteriormente.

É importante um plano de hospedagem sem limite de trafego de dados no seu site, pois você
deve imaginar que este pode ficar popular e caso seja limitado quanto ao trafego de dados ao
exceder o limite de trafego o seu site sairá do ar.

Nas vídeo aulas do curso eu uso o servidor de Hospedagem UOLHOST do tipo LINUX, plano
econômico com 5GB de espaço em disco, fluxo de dados ilimitado.

O segredo deste processo é que alguns tipos de plano de pagamento trimestral lhe oferecem
o domínio grátis no primeiro ano.

André Rossiter

Como instalar no Servidor UOLHOST

Passo 1

Entre no site da UOLHOST, digite o seu login e senha obtidos no momento da contratação.

Na primeira tela clique na opção painel de controle/construtor de sites.

Passo 2

Na segunda tela na parte inferior clique em instalador automático de aplicativos.

André Rossiter

Passo 3

Na parte inferior clique na opção a direita do CMS desejado a se instalar que no nosso caso é o
Joomla.

Passo 4

Preencha os campos existentes na tela, (escolha o diretório) em seguida clique em instalar.

André Rossiter

O painel de controle

Para acessar o seu painel de controle digite a url do site + administrator.

Ex. www.meusite.com/administrator

Nesse momento digite o seu login e senha definidos no momento da instalação.

Dica

Escolha sempre uma senha segura, pois muitos hackers e crackers tentam invadir os sites na
web, seja para mudar os artigos, seja para deletar arquivos, seja para roubar dados de seus
clientes cadastrados.

O importante deste processo é que ao criar uma senha segura (caracteres especiais #,*,%,
letras e números) você dificulta a invasão do seu site.

Talvez pareça irrelevante ter uma senha forte, mas muitas pessoas perderam meses de
trabalho por terem uma senha fraca e terem sido invadidos.

André Rossiter

A primeira tela do painel de controle

Esta é a tela inicial quando você loga no Joomla, todas as funcionalidades do Joomla, desde a
mais simples até a mais complexa pode ser feita a partir desta interface.

O menu superior site

Este primeiro menu superior trabalha com: configurações globais do servidor, mídias para
publicação e atualização FTP pela interface do Joomla, usuários, tipos de usuários, alteração de
senhas e retorno ao painel inicial do Joomla, a navegação também pode ser feita pelos ícones.

André Rossiter

O menu superior menus

Esta aba é responsável por ligar as categorias criadas por você através de menus de navegação
e algumas aplicações são baseadas neste menu referido. Complemento nas vídeo aulas do
curso.

O menu superior conteúdo

Este menu é onde criamos e definimos a arquitetura do nosso site para o Joomla.

A arquitetura deve ser feita anteriormente a sua configuração de arquivos, vai ajudar na lógica
e na arquitetura de navegação do seu site.

André Rossiter

O menu superior componentes

Este menu vem com algumas aplicações extras que existem para o Joomla e outras você pode
instalar.

Ex. o componente Jmultimídia visto em nossa vídeo aula sobre implementação de vídeo no
site, por padrão o componente de contato existente nele por padrão também abordado em
nossa vídeo aula.

O menu superior extensões

Neste menu você pode instalar temas, plug-ins, componentes, aplicativos, dentre outros
diversos, além de manipular e trabalhar com seus temas e acessar o HTML e CSS da página
relacionados ao seu site.

André Rossiter

O menu superior ferramentas

Uma vez que é possível cadastrar e liberar cadastro de novos membros ao seu site ou sistema,
esta ferramenta do menu permite que você envie e-mail em massa para estas pessoas
cadastradas de uma só vez.

O menu superior ajuda

Esta categoria você tem acesso ao suporte do sistema e informações do sistema.

O suporte interno do Joomla é muito bem organizado e categorizado por ordem alfabética.

André Rossiter

Menu configuração geral

No menu de configuração inicial você encontra várias aplicações importantes, como por
exemplo a configuração do SMTP que torna possível o envio e recebimento de e-mail pelo seu
sistema de mensagens do Joomla (extensão).

IMPORTANTE

A opção 1 em vermelho é a única desta categoria que está presente em todos os painéis de
configuração global. Confira abaixo a opção site.

Opção 2 em verde

Lhe possibilita desabilitar o site para visualização do visitante enquanto você o implementa e
configurar uma mensagem para este momento de manutenção, ou atualização do site.

Permite dar um nome tipo TITLE ao site. O tipo de editor do site, recomendado deixar na
configuração padrão, mas existe mais de um tipo e você ainda pode instalar outros.

O importante deste item da interface de número 2 é habilitar ou definir quem entre os
usuários do sistema será notificado pelas mensagens do mesmo decorrente da interação com
o usuário.

Opção 3 em amarelo

Equivalente a meta description do site e as palavras chave, aplicação SEO.

Opção 4 em azul

A opção URL amigável é uma boa aplicação em SEO, mas em alguns momentos habilitar este
recurso pode dar problemas na integração com o banco de dados, neste caso basta desativar
novamente.

André Rossiter

Tela configuração global opção sistema.

Opção 1 em azul

Parâmetros do sistema como caminho do FTP, não deve mexer na editoração do sistema
básico, observe que ele já vem ativo e configurado pela instalação de forma automática.

Opção 2 em vermelho

Interage diretamente com o menu site opção de usuários, esta opção permite que você
bloquei o cadastro de novos usuários, que libere de forma geral dentre outras aplicações.


O Joomla possui módulos e extensões que lhe permitem interagir com o sistema por upload
tanto para o administrador quanto para o usuário, e neste caso da configuração global para o
administrador o legal é restringir extensões de tipos de arquivos para interação imediata, o
que ajuda a proteger o sistema.

Opção 4 em verde

O Joomla para segurança do administrador e do visitante desconecta o internauta ou
administrador também por 15 minutos de inatividade no sistema, e neste aplicativo você pode
alterar este parâmetro. Cuidado para não prolongar muito, porem 15 minutos é realmente
muito pouco eu gosto de deixar em no mínimo em 60 min. A medida que você praticar irá
entender o sentido do que digo, principalmente na hora de digitar artigos online.

André Rossiter

Tela configuração global opção servidor.


Juntamente com as demais opções desmarcadas ( configurações FTP e configurações de banco
de dados) dizem respeito ao sistema, através deste comandos e manipulação você pode
mudar diretórios, banco de dados. Ex. redirecionar o site para outra hospedagem depois que
ele já está publicado.

Opção 2 em verde

A grande vantagem deste painel de codificação é a questão de horário para controle de acesso
de usuários do seu sistema. Através desta opção você sabe o horário que as pessoas entraram
no seu sistema, ou horário que fizeram manipulações, e até mesmo caso você queira manter
horário de suas publicações este sistema tem de estar configurado de acordo com sua posição
geográfica possível de configuração neste item.

Opção 3 em vermelho

Este etapa torna possível que você receba e-mail pelo seu formulário de contato.

Existem métodos de configuração diferente como: send mail, PHP...

Escolha o mais adequado a sua necessidade e configure da maneira certa.

Eu gosto porem de usar o sistema de e-mail do GOOGLE DOCS.

André Rossiter

Menu configuração usuário

Passo 1

Observe a tela inicial de administrar usuários no Joomla.

Por esta interface você adiciona, remove e editora os membros do seu site.

Você também pode ver dados de acesso destes usuários.

Na imagem 1 em verde

Você observa nome de registro e nome do membro cadastrado no site.

Na imagem 2 em vermelho

Você pode observar nível de acesso do usuário e se ele está registrado ou não.

Na imagem 3 em amarelo

Você tem acesso ao email do usuário e data do ultimo acesso.

Na imagem 4 em azul

Você tem acesso ao painel de adicionar novo usuário, editorar e remover estes.

André Rossiter

Passo 2 (Adicionando novos usuários)

Usuários “Frontend”:

Registered: depois de “logado” esse usuário tem acesso ao conteúdo restrito do site.
Author: além dos privilégios do usuário registered , também pode enviar conteúdo e editá-lo
(poderá editar apenas seu próprio conteúdo).
Editor: tem os privilégios dos usuários acima e também os de editar os conteúdos de todos do
seu grupo.
Publisher: pode enviar, editar e publicar qualquer conteúdo.

Usuários “Backend”:

Manager: tem acesso a criação e edição de conteúdo e outras informações da administração
do site.
Administrator: gerencia os conteúdos, inclui, exclui, publica e despublica, e também pode
administrar os usuários.
Super Administrator*: tem acesso total a administração do site e somente ele pode criar um
outro usuário Super Administrator.

André Rossiter

Arquitetura da Informação

“A arquitetura(PB) — (do grego arché — αρχή — significando "primeiro" ou "principal" e
tékton — τέχνη — significando "construção") refere-se à arte ou a técnica de projetar e edificar
o ambiente habitado pelo ser humano. Neste sentido, a arquitectura trata destacadamente da
organização do espaço e de seus elementos: em última instância, a arquitetura lidaria com
qualquer problema de agenciamento, organização, estética e ordenamento de componentes
em qualquer situação de arranjo espacial. No entanto, normalmente a arquitetura associa-se
diretamente ao problema da organização do homem no espaço (e principalmente no espaço
urbano)”.

http://pt.wikipedia.org/wiki/Arquitectura

Talvez você esteja se questionando o porquê de falar sobre arquitetura da informação se este
curso for o seu primeiro contato com sistemas para internet.

Um site simples com poucos links tipo (home, serviços, quem somos e contato) isso realmente
pode não ser o mais relevante, porem os melhores empreendimentos e a grande vantagem
do Joomla é a possibilidade de desenvolvimento de sistemas mais complexos voltado para
portais e grandes sites, apesar de atender bem as necessidades de sistemas simples e nesse
momento a compreensão de arquitetura da informação é imprescindível para os seus estudos
e desenvolvimento no Joomla.

Natureza da informação

Existe uma tendência a pensar que as classificações são naturais ou óbvias, ou lógicas. Ou
ainda “só tem esse jeito” de fazer.

Na verdade o que existem são convenções mais ou menos aceitas por um determinado grupo
de usuários, pois a forma como as pessoas representam a informação dentro de sua própria
mente segue padrões associativos tanto particulares quanto compartilhados.

Arquitetura da informação envolve:

• A compreensão do problema e do público alvo

• A revelação de um sistema de conhecimento

• A relação entre diversos elementos (diferentes ou similares)

• Saber se esses elementos têm o mesmo nível de complexidade

• Saber se a relação entre eles é unidirecional ou bidirecional

• O entendimento prévio dos sistemas tecnológicos

• Uma ponte entre as necessidades cognitivas do usuário e o engenheiro de software

André Rossiter

Roteiro de produção para a web

Objetivo:

Compreender a dimensão global de um projeto para a web, e onde a AI se encaixa durante o
processo de produção.

1. Briefing

No briefing levantam-se informações gerais sobre o cliente, como:

• Marcas & Domínio

• Cores & Preferências

• Conteúdos

• Objetivos

• Público-alvo

• Necessidades & Desejos

Documento de requisitos

Documento construído a partir das interações entre o cliente e o desenvolvedor. Trata-se de
um documento técnico onde constam informações descritivas sobre o sistema, suas
funcionalidades, seus requisitos, usuários, especificações técnicas, opções tecnológicas, etc.
Produzido pelo desenvolvedor, precisa ser aprovado pelo cliente para que se possa passar para
a próxima etapa.

André Rossiter

2. Arquitetura geral do sistema

Organização lógica do fluxo de navegação e interação do sistema. Pode ser indicial e/ou
gráfica. Trata-se de um documento produzido pelo desenvolvedor para orientar a produção. O
desenvolvedor só passa para a quarta etapa depois da aprovação do documento de
arquitetura geral do sistema pelo cliente.

André Rossiter
3. Wireframe

Os wireframes são representações esquemáticas (gráficas) dos “layouts únicos” das telas do
sistema. Indicam o posicionamento dos conteúdos na tela. São “esqueletos” que servem para
fundamentar os layouts

André Rossiter

4. Layout

Layout é o desenho da página, conhecido como “design”. Representação gráfica completa com
todos os elementos visuais que vão compor o sistema. O layout é uma evolução do wireframe.
São arquivos de imagem, geralmente .JPG ou PSD, ou PNG ou CDR, produzido em softwares
como Photoshop, Fireworks, Corel, etc. A implementação só começa após a aprovação do
layout pelo cliente.

André Rossiter

5. Produção

» Levantamento das informações visuais, textuais e sonoroas que entrarão no web site.

» Processamento das informações através de softwares específicos de tratamento de som,
imagem e texto.

» Redação final dos textos de todas as seções do web site.

André Rossiter

Finalização & Implementação

» Finalizar é codificar o layout com técnicas e ferramentas
de front-end

» Implementar é fazer a programação geral do sistema
usando as ferramentas de back-end.

Testes

Após a implementação, o sistema precisa ser testado em laboratório. Publica-se o site em uma
URL “escondida”, para simular condições reais de uso, e montam-se grupos de usuários cujos
perfis foram definidos no documento de requisitos. Se forem detectados problemas na
usabilidade retorna-se à implementação para eventuais consertos

Documentação

Durante o processo de implementação, são anotadas informações importantes sobre o web
site com o objetivo de elaborar os manuais de documentação para a equipe de manutenção.
Esses manuais contém especificações técnicas e informações sobre instalação e configuração.

Entrega

A entrega é a conclusão do projeto. Implica na disponibilização para o cliente do web site na
URL indicada por ele na fase do briefing ou na entrega do conteúdo para que o cliente cuide da
publicação.

Fonte (Arquitetura da Informação): Romulo Cesar Pinto

André Rossiter

Seção, categoria, artigo e menu

Aparentemente este aspecto complicado relacionado a categorização é uma das grandes
vantagens do Joomla, pois ao criar um sistema de categorização complexo, porem completo o
Joomla permite que você trabalhe com sistemas para internet de grande complexidade como
portais de grande porte.

Antes de começar a desenvolver o seu site é importante que você trabalhe aspectos como a
arquitetura da informação vistos no capitulo anterior.

Seção

Devemos começar pela criação de Seção para desenvolver o nosso site no Joomla.

Clique no menu superior Conteúdo, em seguida clique em Administrar Seção.

Nesta próxima tela, você pode editorar seções existentes, excluir estas mesmas seções ou
criar novas seções.

Para criar uma nova seção clique no botão novo em verde na parte superior a direita,
conforme imagem ilustrativa.

André Rossiter

Editorando a nova seção

A parte detalhes em título preencha o nome relacionado a sessão, este deve ser coerente
com a futura categoria relacionada a esta.

O apelido não é preciso completar, mas caso deseje fazer, repita o nome dado no titulo sem
deixar espaços em branco (use underline).

O titulo publicado (caso a sessão seja ativa no momento ou não).

A opção nível de acesso foi descrita em capítulos anteriores, mas observe um breve resumo.

Publico – todos podem acessar

Registrado – o usuário deve ser cadastrado para ter acesso ao conteúdo.

André Rossiter

Categoria

Deve ser feita depois da Seção obrigatoriamente no Joomla 1.5, o visto neste curso.

Para acessar e poder criar categorias no seu menu superior clique no menu conteúdo em
seguida clique na opção administrar categorias.

Nesta próxima tela, você pode editorar categorias existentes, excluir estas mesmas categorias
ou criar novas categorias.

Para criar uma nova categoria clique no botão novo em verde na parte superior a direita,

André Rossiter

Editorando a nova categoria

A parte detalhes em título preencha o nome relacionado a categoria, este deve ser coerente
com a seção que será relacionada obrigatoriamente.


Importante

Existe uma seção abaixo de publicado (relacione a seção a qual esta categoria criada está
relacionada).

O titulo publicado (caso a categoria seja ativa no momento ou não).




André Rossiter

Artigo

Deve ser feita depois da Seção e Categorias ou pode ser órfão relacionado a um Menu no
Joomla 1.5, o visto neste curso.

Para acessar e poder criar Artigos no seu menu superior clique no menu conteúdo em seguida
clique na opção administrar artigos.

Nesta próxima tela, você pode editorar artigos existentes, excluir estas mesmos artigos ou
criar novos artigos.

Para criar uma novo artigo clique no botão novo em verde na parte superior a direita,

André Rossiter

Editorando o novo artigo

A parte detalhes em título preencha o nome relacionado a categoria e seção, este deve ser
coerente com a seção que será relacionada, porem artigos podem ser órfãos relacionados
apenas a Menus


Importante

Você terá obrigatoriamente que associar este artigo a uma seção e categoria, ou escolher
qualquer em caso de artigo orfão (relacione a seção e categoria o qual este artigo criado está
relacionado). Mais detalhes assista as vídeo aulas.

O titulo publicado (caso a categoria seja ativa no momento ou não).




André Rossiter

MENU

Deve ser feita depois da Seção e Categorias ou pode ser órfão relacionado a um ARTIGO
ORFÃO no Joomla 1.5, o visto neste curso.

Para acessar e poder criar Menus no seu menu superior clique no menu conteúdo em
seguida clique na opção Main Menu.

Nesta próxima tela, você pode editorar Menus existentes, excluir estes mesmos Menus ou
criar novos Menus.

O recurso de Menu possui mais configurações que as demais opções vistas neste capitulo
(seção, categoria e artigos), como formatação e diagramação da estrutura de tópicos do
Joomla para os artigos, seções e categorias criados, o Menus pode estar relacionado a cada
um individualmente ou a todos interligado pela seção, mais detalhes veja as vídeo aulas.

Para criar uma novo menu clique no botão novo em verde na parte superior a direita,

André Rossiter

Editorando o novo Menu

Apos ter clicado em novo Menu no item anterior você será direcionado a esta tela
representada na imagem abaixo.

Observe que os títulos são bem descritivos e veja mais detalhes nas vídeo aulas de André
Rossiter, desenvolvedor deste curso e apostila.

Exemplo.

Artigo (relaciona um único artigo ou lista de artigos, relacionados a seções, categorias ou
artigos criados nas etapas anteriores).

Link (relaciona encaminhamento de uma página para outra, dentro ou fora do diretório do
seu site, porém não relacionados a artigos, seções ou categorias).

Contato (relaciona com a categoria de contatos padrão criado no Joomla como visto na vídeo
aula sobre formulário de contato).

JMultimidia / Jumi (relacionado a plug-ins que instalamos conforme as vídeo aulas, caso
deseje criar algum menu relacionado a conteúdo criado por estes escolha a respectiva opção).

André Rossiter

Algumas das categorias possuem subcategorias em sua seleção.

Exemplo

A opção Artigo oferece uma nova aba de Menu sobre o tipo de Layout de Artigo

(Item do Menu).

Observe a imagem ilustrativa abaixo.

Por mais que possamos descrever os Tipos de Item do Menu, a única forma de compreender
de verdade é a pratica, pois eles dizem respeito a diagramação e forma como o conteúdo irá
ser inserido no layout de sua página.

Nas vídeo aulas você pode observar alguns modelos e sua representação gráfica, porém
reforço a importância de se praticar e desenvolver cada uma destas categorias de item de
menu e esta etapa interfere na apresentação e diagramação do seu site de forma indireta na
disposição do conteúdo relacionado a seção, categorias e artigos.

André Rossiter

Terceira e última etapa na criação de seu Menu.

Tipo do Item de Menu

Nesta etapa você pode ré editorar o Item de Menu visto na página 36.

Detalhes do Item do Menu

Nesta etapa é possível nomear este menu, relacionar a posição do Módulo do Menu, tipo de
publicação, nível de acesso e Target (mesma janela ou nova janela de navegação).

Parâmetros básicos

Nesta opção você pode relacionar a seção que deseja que este menu seja vinculado, destaques
de exibição do conteúdo, números de colunas (disposição de conteúdo).

Demais opções podem variar de acordo com o Tipo de Item do Menu.

Uma boa dica

Aquela opção Welcome to FrontPage remove-se em (parâmetros do sistema – deletando o
nome ou alterando para outro de acordo com seu desejo ou necessidade).

André Rossiter

Plug in, complementos, temas, extensões, FTP

Plug-ins, complementos e temas são todos considerados extensões pelo Joomla.

Extensões

A base para instalar qualquer complemento, Plug-in, ou tema pelo seu painel de controle no
Joomla é por extensões.

Para iniciar a instalação de qualquer um destes a primeira etapa é:

Clique no menu superior na opção Extensões, em seguida clique na opção
Instalar/Desinstalar.

Importante

Verifique se a extensão, plug-in, tema ou qualquer outro tipo de aplicativo a ser quanto a sua
compatibilidade com a sua versão do Joomla, já que nem todo aplicativo é compatível com
todas as versões.

André Rossiter

Instalando Aplicativos

Neste momento dentro do Painel de Administrar Extensões clique em selecionar arquivo.

Neste momento na janela pop up do seu browser (navegador) escolha o arquivo desejado e
clique em abrir.

Neste momento clique em Enviar arquivo e instalar.

André Rossiter
O sistema é inteligente e informa as etapas, desta forma depois de clicar em enviar e instalar
arquivos aguarde a mensagem de confirmação do sistema sobre o sucesso da etapa
desenvolvida por você conforme modelo abaixo.

Observação

A maioria dos casos que dá falha na instalação de um plug-in, complemento ou tema é pela
incompatibilidade da versão instalada referente a sua versão.

Caso a opção instalada seja um plug-in ou complemento veja a categoria Plug-in &
Complementos neste capitulo, caso seja um tema que você deseje trabalhar veja a próxima
categoria deste capitulo Temas.

Para administrar o Tema selecionado clique no menu superior Extensões em seguida
administrar tema.

André Rossiter

Temas & Administrar Tema

Para Administrar Tema, remover temas ou alterar clique no menu superior em Extensões em
seguida escolha a opção Administrar Tema.

Nesta próxima tela você poderá observar os temas que você tem instalado, remover, ou
adulterar. Para definir um tema padrão clique no radio buton ao lado esquerdo do nome do
tema em seguida clique em padrão (ele ficará com a estrela de padrão conforme imagem
abaixo.)

André Rossiter

Para editorar um tema em seu front End (HTML ou CSS) clique no nome do tema.

Veja abaixo a tela que você será redirecionado.

Para editorar o HTML clique na opção a direita desta tela anterior na opção Edit HTML.

Este tipo de procedimento é realizado para refazer o design (layout do site), adicionar
módulos, remover módulos, inserir o analytics, dentre outras funções que você possa
adicionar pelo HTML.

Observe o editor HTML.

Lembre de clicar em salvar após as alterações, nesta tela e na tela principal posterior.

André Rossiter

Editor de CSS do Tema

Esta tela pode variar de acordo com o seu tema, porem é importante que saiba que é comum
haver mais de um CSS.

Para editorar o CSS neste momento escolha a folha de estilo referente ao padrão que você
deseja redefinir em seguida clique na parte superior a direita em Editar.

Observe a tela que você será redirecionado após escolher uma folha de estilos para editorar.

Lembre-se de ao final clicar salvar em todas as telas pelo seu caminho de volta.

André Rossiter

Plug-in & Complementos

Para visualizar os plug-ins ou complementos instalados no seu site.

Clique na aba do menu superior na opção componentes observe o modelo abaixo ilustrando o
componente de vídeo instalado (o mesmo abordado na vídeo aula desenvolvida por André
Rossiter) no seu box de estudos.

FTP

FTP é a derivação em sua etimologia da expressão da língua inglesa (file transfer protocol –
protocolo de transferência de arquivos) na comunicação cliente servidor.

Nessa apostila abordo como configurar pela primeira vez o seu FTP no painel de controle na
hospedagem da UOLHOST, em seguida também através de imagens ilustrativas falo sobre a
interface do FIRE FTP que utilizaremos para baixar templates, publicar templates, fazer
alterações e o que for necessário implementar no site através da transferência de arquivos
pelos protocolos web.

André Rossiter

Como criar uma senha de FTP pelo painel de controle da UOLHOST
1 passo

- acesse a sua conta e clique na opção: painel de controle/ construtor de sites

2 passo

- clique na opção trocar senha de FTP

André Rossiter

3 passo

- digite uma nova senha e confirme a senha escolhida por você.

Importante

- Escolha de preferencia uma senha segura, alguém que quebre a sua senha pode mudar os
dados do seu site ou até deletar todo o seu trabalho.

Quanto ao login não somos nos que escolhemos é o que está descrito em usuário.

Anote ou lembre estas etapas para poder configurar o FIRE FTP.

Como configurar o FIRE FTP
Como acessar o FIRE FTP

1 Passo

- Instale o programa, depois acesso a área de FTP

André Rossiter

2 Passo

- Abrirá a tela. Compreenda a interface.

Opção 1

- Corresponde a área de editoração:

a) configurar uma nova conexão FTP

b) navegar entre diversas conexões FTP

c) alterar dados de conexão FTP

d) deletar uma conexão FTP

Opção 2

- Corresponde a interface de navegação do seu computador e a tela presente possui os
arquivos que você poderá atualizar no seu diretório web, através dos protocolos
cliente/servidor pela própria interface do programa.

Opção 3

- Corresponde a interface de arquivos do servidor web onde seus arquivos podem ser
publicados e o seu site hospedado. Este modelo mostra a imagem do servidor antes de ser
conectado.

Opção 4

- Descrições um pouco mais teóricas que definem ações executadas por suas ações através da
interface como forma de comunicação cliente/servidor. É necessário conexão com a internet
para usar o programa.

André Rossiter

3 Passo

- Configurar a primeira conta de acesso cliente servidor pelo FIRE FTP.

Imagem acesso a configuração da primeira conta abaixo.

A tela de configuração de acesso. Como preencher os campos na imagem abaixo, apenas
altere inserindo os dados de seu site nos campos descritos.

Host, Login, Password

André Rossiter

Modelo da página configurada interagindo com o Servidor Web.

Pela hospedagem Windows

Pela hospedagem Linux

OBS. Note que a navegação Windows e Linux ocorre por diretórios diferentes, mas a base é de
navegação básica para acessar, como o Explorer.

André Rossiter

Artisteer – Como fazer meu template

Tela inicial do programa

É importante que você saiba que existem diversas versões do Artisteer e que de acordo com a
sua versão esta interface inicial pode variar, apresentando mais ou menos recursos.

O Artisteer é um software (programa) de computador que interage pela sua interface de
forma mais simples desenvolvendo temas para web sites em plataformas como: Joomla,
Wordpress, Drupal, DotNetNuke, Blogger, Aplicações ASP, Aplicações Net e code Charge
Stúdio.

Nesta tela inicial você pode e deve escolher a plataforma web que deseja trabalhar para
poder seguir para a próxima etapa, em nosso caso iremos usar no curso a plataforma do
Joomla.

André Rossiter

Irei relatar os menus em ordem crescente da esquerda para direita.

Ideias.

Para cada aba de editoração do Artisteer você pode clicar na opção Sugerir Desenho e o
programa irá apresentar opções de layout em forma aleatória para o seu Design de Layout.

Em particular, acredito que esta opção não seja a melhor de se trabalhar.

Nesta aba Ideias você não pode editorar nada, apenas pedir sugestão de ideias referentes aos
nomes descritos em cada etapa.

André Rossiter

Cores e fontes

Nesta aba (cores e fontes), apesar de possuir uma opção (sugerir cores) você pode navegar
entra as opções e escolher cores por conta própria, além de definir a tipografia do site ou
grupo de estilo, escala das fontes ou pedir sugestão para suas fontes.

A minha sugestão com relação a fontes é que escolha fontes padrão, pois algumas fontes
diferentes apesar de bonitas podem acabar prejudicando o seu layout.

Exemplo

Nas versões anteriores ao HTML5 a fonte é carregada diretamente do PC (personal computer)
do internauta e quando ele não possui a fonte a diagramação pode alterar pela diferença de
apresentação de formas e tamanho das fontes no caso do internauta não possuir a fonte que
você usou no seu layout.

A minha sugestão é que use uma fonte da família sem serifa, tipo arial, verdana ou derivadas.

André Rossiter

Disposição

Nesta opção (disposição) você pode escolher o posicionamento dos links, a disposição das
colunas do seu site, ou até mesmo a quantidade de colunas laterais do seu projeto.

O legal do Joomla em relação ao Wordpress principalmente é que em sua interface mesmo
depois de programada, você pode escolher desabilitar módulos para páginas definidas.

Conceitos de arquitetura da informação devem ser levados em conta, ou o objetivo final do
seu projeto, outra coisa interessante é que você pode levar em conta uma reformulação do
layout por um projeto seu e usar a excelente arquitetura na organização do Artisteer para
posteriormente reformular o seu site.

Outra coisa legal é que o layout desenvolvido pelo Artisteer é completamente padronizado e
aceito pela W3C o que torna o seu site um sucesso para plataformas web e lhe retorna
melhores resultados em SEO.

André Rossiter

Fundo

Como as demais categorias do Artisteer você pode nesta aba selecionar a opção sugerir fundo
e ver se algum lhe agrada ou navegar entra as opções padrões e manipular individualmente de
acordo com o intuito do seu projeto.

A opção preenchimento você escolhe a cor de fundo para o seu site. Você também pode
escolher planos de fundo diretamente de seus arquivos na opção do arquivo.

André Rossiter

Folha

Como todas as demais categorias, você tem uma opção de pedir sugestão de folha e ver os
modelos descritos pelo programa, o ideal porem é a aplicação manualmente.

Nesta aba (folha) você pode manipular a largura da folha, raio de fundo ou topo do layout do
site, escolher aplicar ou não aplicar bordas, transparências, preenchimento, margens
inferiores e superiores.

André Rossiter

Cabeçalho

Como todas as categorias a opção cabeçalho possui uma aba a esquerda (sugerir cabeçalho)
que lhe permite obter sugestões do programa sobre cabeçalhos para o seu projeto.

Uma coisa muito legal desta categoria (cabeçalho) é o banco de dados de imagens para
modificação do topo do layout, ou efeitos de fundo para imagens bem profissionais e layouts
institucionais.

Você define inserir o texto do título superior ou não, pode além de escolher imagens do banco
de dados do programa escolher imagens para interagir com o seu layout direto do seu PC.

André Rossiter

Menu

Nesta aba como todas as demais você possui uma opção de sugestão de menus.

O importante nessa tela porem é a opção de disposição da página, formatos para os botões,
coloração dos botões, preenchimento destes botões, definir a fonte relacionada a estas
opções e ícones para menus do seu site.

André Rossiter

Artigos


O mais interessante do Artisteer é a facilidade e inteligência artificial no desenvolvimento de
sua interface, totalmente intuitivo.

Como você pode observar nesta opção (Artigos) você pode escolher a forma que deseja
personalizar os seus artigos.

André Rossiter

Barra Lateral


Aqui você pode personalizar o tamanho da barra lateral, escolher a disposição destas barras
laterais, a configuração do conteúdo relacionado as barras laterais, cores de preenchimento,
quantidade de barras laterais que variam de uma a duas barras laterais.

André Rossiter

Menu vertical


Trabalhe com todas as opções e personalização possível para o menu vertical do seu site,
apesar de disponível em outras abas do site, nesta categoria você pode personalizar de forma
mais avançada individualmente nesta aba (menu vertical).

André Rossiter

Botões


A essa altura você já percebeu como é intuitiva a interface, eu acho que parece muito com a
do Word, sendo que as aplicações mais eficientes e capazes de lhe retornar mais dinheiro que
o Word, em aplicações diferentes se é que é possível fazer esta equiparação.

Manipule desta forma a aparência dos seus botões.

Dica

O layout padrão o botão é grande, caso deseje fazer um layout pro FACEBOOK, lembre de
diminuir o tamanho do botão.

André Rossiter

Rodapé


As opções de rodapé são bem simples, acredito que para melhorar a aparência seja melhor
editorar depois de instalado pelo próprio painel do Joomla, usando o HTML.

Dica

As vezes você usa uma cor sólida no seu rodapé e este aparece de forma clara, isto ocorre
quando está previamente aplicado uma transparência no rodapé, para ajustar esta ocorrência
vá na opção (transparência) em seguida escolha a opção sem transparência.

André Rossiter

Link de Rodapé

Para remover a opção link de rodapé na parte superior clique na opção exportar em seguida
clique na opção (opções de exportação...).

Ainda em Link de rodapé na opção (exportar) você terá uma nova janela com 3 opções.

Vou detalhar cada uma de forma ilustrativa. (Propriedades).

André Rossiter

Marca D’agua

Para exibir ou remover marca d’agua.

Esta ultima opção (Nota de Rodapé) permite que você remova o link do final dá pagina, eu
acho fundamental, pois acredito que fique muito feio acrescentar isso no final da página,
mesmo em templates vendidos para clientes e manter a sua publicidade, acredito que está
seja feita pela excelência na prestação de serviços.

André Rossiter

Exportando o seu projeto para publicar no site

Para exportar o seu projeto clique na aba superior no ícone da tela de pintura, símbolo do
Artisteer, em seguida clique na opção Exportar, em seguida clique na opção Modelo Joomla.

Nesta próxima tela de um nome ao seu template

(IMPORTANTE – não use espaço nem caracteres especiais)

Selecione a pasta a ser salvo o seu arquivo (template)

(exportar como)

opção zipada tem de ser feita pelo FTP do Joomla

enquanto a opção Pasta tem de ser feita pelo FTP do fire FTP ou zipada (importante zipada não
pode ser extensão RAR)

André Rossiter

Como Instalar o Joomla no

FACEBOOK

André Rossiter

Como criar uma Fan Page

É importante que você crie uma Fan Page para poder instalar o Joomla no FACEBOOK, pois no
perfil de usuário normal não é possível ser feito isso, nem na página de grupo, mais detalhes
no curso sobre Redes Sociais.

Passo 1

Acesse qualquer página Fan Page no FACEBOOK, na parte inferior clique na opção criar página.

André Rossiter

Passo 2

Escolha a opção Negócios locais ou lugar de acordo com seu empreendimento.

Depois de clicar na opção desejada aparecerá uma opção com dados a serem preenchidos,
desenvolva esta etapa e clique em começar.

André Rossiter

Passo 3

Você será direcionado a sua página FAN PAGE no FACEBOOK.

Clique em curtir e atualize os dados básicos conforme os textos descritos no item começar.

André Rossiter

Passo 4

Insira uma imagem no seu perfil de FAN PAGE.

As pessoas não gostam de interagir com canais no FACEBOOK sem imagem.

Momento 1

Momento 2

André Rossiter

Momento 3

Sua página agora está com sua foto.

André Rossiter

Como Instalar o Joomla no FACEBOOK

Instale a APP do IFRAME Apps.

Link de acesso http://www.facebook.com/iframe.apps

Passo 1 clique em (Like – gostei) depois clique em ir para aplicativo.

Passo 2

Clique na opção (allow – permitir).

André Rossiter

Passo 3

Copie e cole a URL (localizador de recursos uniformes) do seu site, ou seja, o endereço do seu
site com o protocolo de comunicação completo.

Ex.

http://www.enderecomeusite.com

Caso você possua mais de uma FAN PAGE no FACEBOOK, pode ocorrer de ser direcionado a
uma nova página para escolher a FAN PAGE a ser instalada o IFRAME APPS.

Escolha a FAN PAGE desejada e clique em adicionar app.

IMPORTANTE

As vezes esta etapa acontece no lugar do passo 3 as vezes como o quarto passo mesmo.

Nesse momento o seu site vai estar instalado no FACEBOOK.

André Rossiter

Editorando a APPS

Entre na página oficial de sua FAN PAGE no FACEBOOK.

Neste momento clique na opção editar.

Uma nova janela irá aparecer no FACEBOOK conforme imagem abaixo.

Clique na opção aplicativos.

André Rossiter

Agora na opção aplicativos.

Observe, instale e editore os aplicativos instalados no seu FACEBOOK.

A opção IFRAME APPS

Clique na opção editar configurações para adicionar ou remover esta guia de sua página.

Na opção ir para aplicativo você pode alterar os dados e URL do seu site.

André Rossiter

Observe o resultado final da FAN PAGE do Professor.

André Rossiter

Link de acesso a Fan Page do professor: http://www.facebook.com/tutorbrasil

André Rossiter

Gerenciando perfil preferencial

Passo 1

Entre na URL de sua FAN PAGE.

Ex. http://www.facebook.com/minha_fan_page

Clique na opção Editar página.

Passo 2

Você neste momento estará na interface de editoração do perfil de sua Fan Page.

A opção para editorar (definir) sua página inicial da Fan Page é (gerenciar permissões).

André Rossiter

Passo 3

Clique agora na opção guia de destino padrão.

Escolha a página principal dentre as suas páginas existentes.

Para finalizar lembre de clicar na opção salvar alterações no final da página.

Joomla

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (10)

Similaire à Joomla

Similaire à Joomla (20)

Plus de andre rossiter

Plus de andre rossiter (18)

Joomla