joomlaapostilaandrerossiteroficialcompleta-111212233004-phpapp01.pdf

Andr Rossiter [email protected]

Andr Rossiter

[email protected]


ndice

Introduo ............................................................................................................................. 3

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

Introduo Joomla ................................................................................................................. 5

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

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

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

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

Menu configurao geral ...................................................................................................... 16

Menu configurao usurio .................................................................................................. 19

Arquitetura da Informao ................................................................................................... 21

Seo, categoria, artigo e menu ........................................................................................... 28

Plug in, complementos, temas, extenses, FTP ................................................................... 38

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

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


Introduo

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 atravs de sua tecnologia moderna e

funcional em pouco tempo.


O que CMS

CMS a abreviao da expresso da lngua inglesa (contente management system sistema

de gerenciamento de contedo).

A plataforma CMS open source (cdigo fonte aberto) o que permite o desenvolvedor

manipular as aplicaes deste sistema para suas necessidades sem custos adicionais.

Na verdade os sistemas CMS tem revolucionado a maneira de empreender na web, pois so

feitos por programadores e desenvolvedores ao redor do mundo eleitos por meritocracia e

viabilizam cada vez mais com menos conhecimento desenvolver sistemas e aplicaes

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 evoluo de segurana e

interface deste sistema.

Obter todos os recursos disponveis em qualquer plataforma CMS do zero custaria muito caro,

sendo assim outra grande vantagem de se utilizar CMS o baixo custo de sua implementao

o que pode ser repassado para o cliente e torna os empreendimentos mais viveis.


Introduo Joomla

Desenvolvido a partir do Mambo. escrito em PHP e roda no servidor web Apache ou IIS e

banco de dados MySQL. (Wikipedia) .

Caractersticas principais

Cdigo aberto (Licena GPL); Sistema simples de fluxo de aprovao; Arquivamento para contedo no utilizados (Lixeira); Gerenciamento de banners; Sistema de publicao para o contedo; Sumrio de contedo no formato RSS; Busca otimizada (qualquer palavra registrada); Frontend j traduzido em vrias lnguas; Fcil instalao para novos templates, mdulos e componentes; Hierarquia para grupos de usurios; Estatsticas bsicas de visitantes (existem mdulos mais complexos que podem ser

adicionados); Editor de contedo WYSIWYG; Sistema de enquete simples (com acompanhamento de resultado em tempo real); Sistemas de ndices de avaliao; Extenses livres em diversos sites (Mdulos, Componentes, Templates, Tradues). Compatibilidade com verso anterior.

(Wikipedia)


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

A ferramenta apresenta grficos com a frequncia em que um termo particular procurado em vrias regies do mundo, e em vrios idiomas. O eixo horizontal do grfico representa tempo (a partir de algum tempo em 2004), e o vertical com que frequncia procurado um termo, globalmente. Tambm permite o usurio comparar o volume de procuras entre duas ou mais condies. Notcias relacionadas aos termos buscados so mostradas ao lado e relacionadas com o grfico, apresentando possveis motivos para um aumento ou diminuio do volume de buscas.

(Wikipedia)

Grafico comparativo Joomla e outros CMS pelo GOOGLE TRENDS


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 (programao) um sistema seguro utilizando PHP (linguagem de

programao orientada ao objeto) e um banco de dados MYSQL onde so 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.


Como contratar uma hospedagem

Recomendo um servidor grande, pois oferecem suporte 24hs, possuem manuteno com

maior frequncia que servidores pequenos e de um modo geral as mquinas so mais

modernas e para finalizar o que acredito ser o mais importante a estrutura de segurana

quanto aos aspecto de redes na sua configurao.

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 vdeo aulas do curso eu uso o servidor de Hospedagem UOLHOST do tipo LINUX, plano

econmico com 5GB de espao em disco, fluxo de dados ilimitado.

O segredo deste processo que alguns tipos de plano de pagamento trimestral lhe oferecem

o domnio grtis no primeiro ano.


Como instalar no Servidor UOLHOST

Passo 1

Entre no site da UOLHOST, digite o seu login e senha obtidos no momento da contratao.

Na primeira tela clique na opo painel de controle/construtor de sites.

Passo 2

Na segunda tela na parte inferior clique em instalador automtico de aplicativos.


Passo 3

Na parte inferior clique na opo a direita do CMS desejado a se instalar que no nosso caso o

Joomla.

Passo 4

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


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 instalao.

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 nmeros) voc dificulta a invaso do seu site.

Talvez parea irrelevante ter uma senha forte, mas muitas pessoas perderam meses de

trabalho por terem uma senha fraca e terem sido invadidos.


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: configuraes globais do servidor, mdias para

publicao e atualizao FTP pela interface do Joomla, usurios, tipos de usurios, alterao de

senhas e retorno ao painel inicial do Joomla, a navegao tambm pode ser feita pelos cones.


O menu superior menus

Esta aba responsvel por ligar as categorias criadas por voc atravs de menus de navegao

e algumas aplicaes so baseadas neste menu referido. Complemento nas vdeo aulas do

curso.

O menu superior contedo

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

A arquitetura deve ser feita anteriormente a sua configurao de arquivos, vai ajudar na lgica

e na arquitetura de navegao do seu site.


O menu superior componentes

Este menu vem com algumas aplicaes extras que existem para o Joomla e outras voc pode

instalar.

Ex. o componente Jmultimdia visto em nossa vdeo aula sobre implementao de vdeo no

site, por padro o componente de contato existente nele por padro tambm abordado em

nossa vdeo aula.

O menu superior extenses

Neste menu voc pode instalar temas, plug-ins, componentes, aplicativos, dentre outros

diversos, alm de manipular e trabalhar com seus temas e acessar o HTML e CSS da pgina

relacionados ao seu site.


O menu superior ferramentas

Uma vez que possvel 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 informaes do sistema.

O suporte interno do Joomla muito bem organizado e categorizado por ordem alfabtica.


Menu configurao geral

No menu de configurao inicial voc encontra vrias aplicaes importantes, como por

exemplo a configurao do SMTP que torna possvel o envio e recebimento de e-mail pelo seu

sistema de mensagens do Joomla (extenso).

IMPORTANTE

A opo 1 em vermelho a nica desta categoria que est presente em todos os painis de

configurao global. Confira abaixo a opo site.

Opo 2 em verde

Lhe possibilita desabilitar o site para visualizao do visitante enquanto voc o implementa e

configurar uma mensagem para este momento de manuteno, ou atualizao do site.

Permite dar um nome tipo TITLE ao site. O tipo de editor do site, recomendado deixar na

configurao padro, mas existe mais de um tipo e voc ainda pode instalar outros.

O importante deste item da interface de nmero 2 habilitar ou definir quem entre os

usurios do sistema ser notificado pelas mensagens do mesmo decorrente da interao com

o usurio.

Opo 3 em amarelo

Equivalente a meta description do site e as palavras chave, aplicao SEO.

Opo 4 em azul

A opo URL amigvel uma boa aplicao em SEO, mas em alguns momentos habilitar este

recurso pode dar problemas na integrao com o banco de dados, neste caso basta desativar

novamente.


Tela configurao global opo sistema.

Opo 1 em azul

Parmetros do sistema como caminho do FTP, no deve mexer na editorao do sistema

bsico, observe que ele j vem ativo e configurado pela instalao de forma automtica.

Opo 2 em vermelho

Interage diretamente com o menu site opo de usurios, esta opo permite que voc

bloquei o cadastro de novos usurios, que libere de forma geral dentre outras aplicaes.

Opo 3 em amarelo

O Joomla possui mdulos e extenses que lhe permitem interagir com o sistema por upload

tanto para o administrador quanto para o usurio, e neste caso da configurao global para o

administrador o legal restringir extenses de tipos de arquivos para interao imediata, o

que ajuda a proteger o sistema.

Opo 4 em verde

O Joomla para segurana do administrador e do visitante desconecta o internauta ou

administrador tambm por 15 minutos de inatividade no sistema, e neste aplicativo voc pode

alterar este parmetro. Cuidado para no prolongar muito, porem 15 minutos realmente

muito pouco eu gosto de deixar em no mnimo em 60 min. A medida que voc praticar ir

entender o sentido do que digo, principalmente na hora de digitar artigos online.


Tela configurao global opo servidor.

Opo 1 em amarelo

Juntamente com as demais opes desmarcadas ( configuraes FTP e configuraes de banco

de dados) dizem respeito ao sistema, atravs deste comandos e manipulao voc pode

mudar diretrios, banco de dados. Ex. redirecionar o site para outra hospedagem depois que

ele j est publicado.

Opo 2 em verde

A grande vantagem deste painel de codificao a questo de horrio para controle de acesso

de usurios do seu sistema. Atravs desta opo voc sabe o horrio que as pessoas entraram

no seu sistema, ou horrio que fizeram manipulaes, e at mesmo caso voc queira manter

horrio de suas publicaes este sistema tem de estar configurado de acordo com sua posio

geogrfica possvel de configurao neste item.

Opo 3 em vermelho

Este etapa torna possvel que voc receba e-mail pelo seu formulrio de contato.

Existem mtodos de configurao 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.


Menu configurao usurio

Passo 1

Observe a tela inicial de administrar usurios no Joomla.

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

Voc tambm pode ver dados de acesso destes usurios.

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 nvel de acesso do usurio e se ele est registrado ou no.

Na imagem 3 em amarelo

Voc tem acesso ao email do usurio e data do ultimo acesso.

Na imagem 4 em azul

Voc tem acesso ao painel de adicionar novo usurio, editorar e remover estes.


Passo 2 (Adicionando novos usurios)

Usurios Frontend:

Registered: depois de logado esse usurio tem acesso ao contedo restrito do site.

Author: alm dos privilgios do usurio registered , tambm pode enviar contedo e edit-lo

(poder editar apenas seu prprio contedo).

Editor: tem os privilgios dos usurios acima e tambm os de editar os contedos de todos do

seu grupo.

Publisher: pode enviar, editar e publicar qualquer contedo.

Usurios Backend:

Manager: tem acesso a criao e edio de contedo e outras informaes da administrao

do site.

Administrator: gerencia os contedos, inclui, exclui, publica e despublica, e tambm pode

administrar os usurios.

Super Administrator*: tem acesso total a administrao do site e somente ele pode criar um

outro usurio Super Administrator.


Arquitetura da Informao

A arquitetura(PB) (do grego arch significando "primeiro" ou "principal" e

tkton significando "construo") refere-se arte ou a tcnica de projetar e edificar

o ambiente habitado pelo ser humano. Neste sentido, a arquitectura trata destacadamente da

organizao do espao e de seus elementos: em ltima instncia, a arquitetura lidaria com

qualquer problema de agenciamento, organizao, esttica e ordenamento de componentes

em qualquer situao de arranjo espacial. No entanto, normalmente a arquitetura associa-se

diretamente ao problema da organizao do homem no espao (e principalmente no espao

urbano).

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

Talvez voc esteja se questionando o porqu de falar sobre arquitetura da informao se este

curso for o seu primeiro contato com sistemas para internet.

Um site simples com poucos links tipo (home, servios, quem somos e contato) isso realmente

pode no 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 compreenso de arquitetura da informao imprescindvel para os seus estudos

e desenvolvimento no Joomla.

Natureza da informao

Existe uma tendncia a pensar que as classificaes so naturais ou bvias, ou lgicas. Ou

ainda s tem esse jeito de fazer.

Na verdade o que existem so convenes mais ou menos aceitas por um determinado grupo

de usurios, pois a forma como as pessoas representam a informao dentro de sua prpria

mente segue padres associativos tanto particulares quanto compartilhados.

Arquitetura da informao envolve:

A compreenso do problema e do pblico alvo

A revelao de um sistema de conhecimento

A relao entre diversos elementos (diferentes ou similares)

Saber se esses elementos tm o mesmo nvel de complexidade

Saber se a relao entre eles unidirecional ou bidirecional

O entendimento prvio dos sistemas tecnolgicos

Uma ponte entre as necessidades cognitivas do usurio e o engenheiro de software


Roteiro de produo para a web

Objetivo:

Compreender a dimenso global de um projeto para a web, e onde a AI se encaixa durante o

processo de produo.

1. Briefing

No briefing levantam-se informaes gerais sobre o cliente, como:

Marcas & Domnio

Cores & Preferncias

Contedos

Objetivos

Pblico-alvo

Necessidades & Desejos

Documento de requisitos

Documento construdo a partir das interaes entre o cliente e o desenvolvedor. Trata-se de

um documento tcnico onde constam informaes descritivas sobre o sistema, suas

funcionalidades, seus requisitos, usurios, especificaes tcnicas, opes tecnolgicas, etc.

Produzido pelo desenvolvedor, precisa ser aprovado pelo cliente para que se possa passar para

a prxima etapa.


2. Arquitetura geral do sistema

Organizao lgica do fluxo de navegao e interao do sistema. Pode ser indicial e/ou

grfica. Trata-se de um documento produzido pelo desenvolvedor para orientar a produo. O

desenvolvedor s passa para a quarta etapa depois da aprovao do documento de

arquitetura geral do sistema pelo cliente.


3. Wireframe

Os wireframes so representaes esquemticas (grficas) dos layouts nicos das telas do

sistema. Indicam o posicionamento dos contedos na tela. So esqueletos que servem para

fundamentar os layouts


4. Layout

Layout o desenho da pgina, conhecido como design. Representao grfica completa com

todos os elementos visuais que vo compor o sistema. O layout uma evoluo do wireframe.

So arquivos de imagem, geralmente .JPG ou PSD, ou PNG ou CDR, produzido em softwares

como Photoshop, Fireworks, Corel, etc. A implementao s comea aps a aprovao do

layout pelo cliente.


5. Produo

Levantamento das informaes visuais, textuais e sonoroas que entraro no web site.

Processamento das informaes atravs de softwares especficos de tratamento de som,

imagem e texto.

Redao final dos textos de todas as sees do web site.


Finalizao & Implementao

Finalizar codificar o layout com tcnicas e ferramentas

de front-end

Implementar fazer a programao geral do sistema

usando as ferramentas de back-end.

Testes

Aps a implementao, o sistema precisa ser testado em laboratrio. Publica-se o site em uma

URL escondida, para simular condies reais de uso, e montam-se grupos de usurios cujos

perfis foram definidos no documento de requisitos. Se forem detectados problemas na

usabilidade retorna-se implementao para eventuais consertos

Documentao

Durante o processo de implementao, so anotadas informaes importantes sobre o web

site com o objetivo de elaborar os manuais de documentao para a equipe de manuteno.

Esses manuais contm especificaes tcnicas e informaes sobre instalao e configurao.

Entrega

A entrega a concluso do projeto. Implica na disponibilizao para o cliente do web site na

URL indicada por ele na fase do briefing ou na entrega do contedo para que o cliente cuide da

publicao.

Fonte (Arquitetura da Informao): Romulo Cesar Pinto


Seo, categoria, artigo e menu

Aparentemente este aspecto complicado relacionado a categorizao uma das grandes

vantagens do Joomla, pois ao criar um sistema de categorizao complexo, porem completo o

Joomla permite que voc trabalhe com sistemas para internet de grande complexidade como

portais de grande porte.

Antes de comear a desenvolver o seu site importante que voc trabalhe aspectos como a

arquitetura da informao vistos no capitulo anterior.

Seo

Devemos comear pela criao de Seo para desenvolver o nosso site no Joomla.

Clique no menu superior Contedo, em seguida clique em Administrar Seo.

Nesta prxima tela, voc pode editorar sees existentes, excluir estas mesmas sees ou

criar novas sees.

Para criar uma nova seo clique no boto novo em verde na parte superior a direita,

conforme imagem ilustrativa.


Editorando a nova seo

A parte detalhes em ttulo preencha o nome relacionado a sesso, este deve ser coerente

com a futura categoria relacionada a esta.

O apelido no preciso completar, mas caso deseje fazer, repita o nome dado no titulo sem

deixar espaos em branco (use underline).

O titulo publicado (caso a sesso seja ativa no momento ou no).

A opo nvel de acesso foi descrita em captulos anteriores, mas observe um breve resumo.

Publico todos podem acessar

Registrado o usurio deve ser cadastrado para ter acesso ao contedo.


Categoria

Deve ser feita depois da Seo obrigatoriamente no Joomla 1.5, o visto neste curso.

Para acessar e poder criar categorias no seu menu superior clique no menu contedo em

seguida clique na opo administrar categorias.

Nesta prxima tela, voc pode editorar categorias existentes, excluir estas mesmas categorias

ou criar novas categorias.

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



Editorando a nova categoria

A parte detalhes em ttulo preencha o nome relacionado a categoria, este deve ser coerente

com a seo que ser relacionada obrigatoriamente.



Importante

Existe uma seo abaixo de publicado (relacione a seo a qual esta categoria criada est

relacionada).

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





Artigo

Deve ser feita depois da Seo e Categorias ou pode ser rfo 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 contedo em seguida

clique na opo administrar artigos.

Nesta prxima tela, voc pode editorar artigos existentes, excluir estas mesmos artigos ou

criar novos artigos.

Para criar uma novo artigo clique no boto novo em verde na parte superior a direita,



Editorando o novo artigo

A parte detalhes em ttulo preencha o nome relacionado a categoria e seo, este deve ser

coerente com a seo que ser relacionada, porem artigos podem ser rfos relacionados

apenas a Menus



Importante

Voc ter obrigatoriamente que associar este artigo a uma seo e categoria, ou escolher

qualquer em caso de artigo orfo (relacione a seo e categoria o qual este artigo criado est

relacionado). Mais detalhes assista as vdeo aulas.

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





MENU

Deve ser feita depois da Seo e Categorias ou pode ser rfo relacionado a um ARTIGO

ORFO no Joomla 1.5, o visto neste curso.

Para acessar e poder criar Menus no seu menu superior clique no menu contedo em

seguida clique na opo Main Menu.

Nesta prxima tela, voc pode editorar Menus existentes, excluir estes mesmos Menus ou

criar novos Menus.

O recurso de Menu possui mais configuraes que as demais opes vistas neste capitulo

(seo, categoria e artigos), como formatao e diagramao da estrutura de tpicos do

Joomla para os artigos, sees e categorias criados, o Menus pode estar relacionado a cada

um individualmente ou a todos interligado pela seo, mais detalhes veja as vdeo aulas.

Para criar uma novo menu clique no boto novo em verde na parte superior a direita,



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 ttulos so bem descritivos e veja mais detalhes nas vdeo aulas de Andr

Rossiter, desenvolvedor deste curso e apostila.

Exemplo.

Artigo (relaciona um nico artigo ou lista de artigos, relacionados a sees, categorias ou

artigos criados nas etapas anteriores).

Link (relaciona encaminhamento de uma pgina para outra, dentro ou fora do diretrio do

seu site, porm no relacionados a artigos, sees ou categorias).

Contato (relaciona com a categoria de contatos padro criado no Joomla como visto na vdeo

aula sobre formulrio de contato).

JMultimidia / Jumi (relacionado a plug-ins que instalamos conforme as vdeo aulas, caso

deseje criar algum menu relacionado a contedo criado por estes escolha a respectiva opo).


Algumas das categorias possuem subcategorias em sua seleo.

Exemplo

A opo 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 diagramao e forma como o contedo ir

ser inserido no layout de sua pgina.

Nas vdeo aulas voc pode observar alguns modelos e sua representao grfica, porm

reforo a importncia de se praticar e desenvolver cada uma destas categorias de item de

menu e esta etapa interfere na apresentao e diagramao do seu site de forma indireta na

disposio do contedo relacionado a seo, categorias e artigos.


Terceira e ltima etapa na criao de seu Menu.

Tipo do Item de Menu

Nesta etapa voc pode r editorar o Item de Menu visto na pgina 36.

Detalhes do Item do Menu

Nesta etapa possvel nomear este menu, relacionar a posio do Mdulo do Menu, tipo de

publicao, nvel de acesso e Target (mesma janela ou nova janela de navegao).

Parmetros bsicos

Nesta opo voc pode relacionar a seo que deseja que este menu seja vinculado, destaques

de exibio do contedo, nmeros de colunas (disposio de contedo).

Demais opes podem variar de acordo com o Tipo de Item do Menu.

Uma boa dica

Aquela opo Welcome to FrontPage remove-se em (parmetros do sistema deletando o

nome ou alterando para outro de acordo com seu desejo ou necessidade).


Plug in, complementos, temas, extenses, FTP

Plug-ins, complementos e temas so todos considerados extenses pelo Joomla.

Extenses

A base para instalar qualquer complemento, Plug-in, ou tema pelo seu painel de controle no

Joomla por extenses.

Para iniciar a instalao de qualquer um destes a primeira etapa :

Clique no menu superior na opo Extenses, em seguida clique na opo

Instalar/Desinstalar.

Importante

Verifique se a extenso, plug-in, tema ou qualquer outro tipo de aplicativo a ser quanto a sua

compatibilidade com a sua verso do Joomla, j que nem todo aplicativo compatvel com

todas as verses.


Instalando Aplicativos

Neste momento dentro do Painel de Administrar Extenses 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.


O sistema inteligente e informa as etapas, desta forma depois de clicar em enviar e instalar

arquivos aguarde a mensagem de confirmao do sistema sobre o sucesso da etapa

desenvolvida por voc conforme modelo abaixo.

Observao

A maioria dos casos que d falha na instalao de um plug-in, complemento ou tema pela

incompatibilidade da verso instalada referente a sua verso.

Caso a opo 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 prxima

categoria deste capitulo Temas.

Para administrar o Tema selecionado clique no menu superior Extenses em seguida

administrar tema.


Temas & Administrar Tema

Para Administrar Tema, remover temas ou alterar clique no menu superior em Extenses em

seguida escolha a opo Administrar Tema.

Nesta prxima tela voc poder observar os temas que voc tem instalado, remover, ou

adulterar. Para definir um tema padro clique no radio buton ao lado esquerdo do nome do

tema em seguida clique em padro (ele ficar com a estrela de padro conforme imagem

abaixo.)


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 opo a direita desta tela anterior na opo Edit HTML.

Este tipo de procedimento realizado para refazer o design (layout do site), adicionar

mdulos, remover mdulos, inserir o analytics, dentre outras funes que voc possa

adicionar pelo HTML.

Observe o editor HTML.

Lembre de clicar em salvar aps as alteraes, nesta tela e na tela principal posterior.


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 padro que voc

deseja redefinir em seguida clique na parte superior a direita em Editar.

Observe a tela que voc ser redirecionado aps escolher uma folha de estilos para editorar.

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


Plug-in & Complementos

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

Clique na aba do menu superior na opo componentes observe o modelo abaixo ilustrando o

componente de vdeo instalado (o mesmo abordado na vdeo aula desenvolvida por Andr

Rossiter) no seu box de estudos.

FTP

FTP a derivao em sua etimologia da expresso da lngua inglesa (file transfer protocol

protocolo de transferncia de arquivos) na comunicao cliente servidor.

Nessa apostila abordo como configurar pela primeira vez o seu FTP no painel de controle na

hospedagem da UOLHOST, em seguida tambm atravs de imagens ilustrativas falo sobre a

interface do FIRE FTP que utilizaremos para baixar templates, publicar templates, fazer

alteraes e o que for necessrio implementar no site atravs da transferncia de arquivos

pelos protocolos web.


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

1 passo

- acesse a sua conta e clique na opo: painel de controle/ construtor de sites

2 passo

- clique na opo trocar senha de FTP


3 passo

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

Importante

- Escolha de preferencia uma senha segura, algum que quebre a sua senha pode mudar os

dados do seu site ou at deletar todo o seu trabalho.

Quanto ao login no somos nos que escolhemos o que est descrito em usurio.

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


2 Passo

- Abrir a tela. Compreenda a interface.

Opo 1

- Corresponde a rea de editorao:

a) configurar uma nova conexo FTP

b) navegar entre diversas conexes FTP

c) alterar dados de conexo FTP

d) deletar uma conexo FTP

Opo 2

- Corresponde a interface de navegao do seu computador e a tela presente possui os

arquivos que voc poder atualizar no seu diretrio web, atravs dos protocolos

cliente/servidor pela prpria interface do programa.

Opo 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.

Opo 4

- Descries um pouco mais tericas que definem aes executadas por suas aes atravs da

interface como forma de comunicao cliente/servidor. necessrio conexo com a internet

para usar o programa.


3 Passo

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

Imagem acesso a configurao da primeira conta abaixo.

A tela de configurao de acesso. Como preencher os campos na imagem abaixo, apenas

altere inserindo os dados de seu site nos campos descritos.

Host, Login, Password


Modelo da pgina configurada interagindo com o Servidor Web.

Pela hospedagem Windows

Pela hospedagem Linux

OBS. Note que a navegao Windows e Linux ocorre por diretrios diferentes, mas a base de

navegao bsica para acessar, como o Explorer.


Artisteer Como fazer meu template

Tela inicial do programa

importante que voc saiba que existem diversas verses do Artisteer e que de acordo com a

sua verso 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, Aplicaes ASP, Aplicaes Net e code Charge

Stdio.

Nesta tela inicial voc pode e deve escolher a plataforma web que deseja trabalhar para

poder seguir para a prxima etapa, em nosso caso iremos usar no curso a plataforma do

Joomla.


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

Ideias.

Para cada aba de editorao do Artisteer voc pode clicar na opo Sugerir Desenho e o

programa ir apresentar opes de layout em forma aleatria para o seu Design de Layout.

Em particular, acredito que esta opo no seja a melhor de se trabalhar.

Nesta aba Ideias voc no pode editorar nada, apenas pedir sugesto de ideias referentes aos

nomes descritos em cada etapa.


Cores e fontes

Nesta aba (cores e fontes), apesar de possuir uma opo (sugerir cores) voc pode navegar

entra as opes e escolher cores por conta prpria, alm de definir a tipografia do site ou

grupo de estilo, escala das fontes ou pedir sugesto para suas fontes.

A minha sugesto com relao a fontes que escolha fontes padro, pois algumas fontes

diferentes apesar de bonitas podem acabar prejudicando o seu layout.

Exemplo

Nas verses anteriores ao HTML5 a fonte carregada diretamente do PC (personal computer)

do internauta e quando ele no possui a fonte a diagramao pode alterar pela diferena de

apresentao de formas e tamanho das fontes no caso do internauta no possuir a fonte que

voc usou no seu layout.

A minha sugesto que use uma fonte da famlia sem serifa, tipo arial, verdana ou derivadas.


Disposio

Nesta opo (disposio) voc pode escolher o posicionamento dos links, a disposio das

colunas do seu site, ou at mesmo a quantidade de colunas laterais do seu projeto.

O legal do Joomla em relao ao Wordpress principalmente que em sua interface mesmo

depois de programada, voc pode escolher desabilitar mdulos para pginas definidas.

Conceitos de arquitetura da informao devem ser levados em conta, ou o objetivo final do

seu projeto, outra coisa interessante que voc pode levar em conta uma reformulao do

layout por um projeto seu e usar a excelente arquitetura na organizao 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.


Fundo

Como as demais categorias do Artisteer voc pode nesta aba selecionar a opo sugerir fundo

e ver se algum lhe agrada ou navegar entra as opes padres e manipular individualmente de

acordo com o intuito do seu projeto.

A opo preenchimento voc escolhe a cor de fundo para o seu site. Voc tambm pode

escolher planos de fundo diretamente de seus arquivos na opo do arquivo.


Folha

Como todas as demais categorias, voc tem uma opo de pedir sugesto de folha e ver os

modelos descritos pelo programa, o ideal porem a aplicao manualmente.

Nesta aba (folha) voc pode manipular a largura da folha, raio de fundo ou topo do layout do

site, escolher aplicar ou no aplicar bordas, transparncias, preenchimento, margens

inferiores e superiores.


Cabealho

Como todas as categorias a opo cabealho possui uma aba a esquerda (sugerir cabealho)

que lhe permite obter sugestes do programa sobre cabealhos para o seu projeto.

Uma coisa muito legal desta categoria (cabealho) o banco de dados de imagens para

modificao do topo do layout, ou efeitos de fundo para imagens bem profissionais e layouts

institucionais.

Voc define inserir o texto do ttulo superior ou no, pode alm de escolher imagens do banco

de dados do programa escolher imagens para interagir com o seu layout direto do seu PC.


Menu

Nesta aba como todas as demais voc possui uma opo de sugesto de menus.

O importante nessa tela porem a opo de disposio da pgina, formatos para os botes,

colorao dos botes, preenchimento destes botes, definir a fonte relacionada a estas

opes e cones para menus do seu site.


Artigos


O mais interessante do Artisteer a facilidade e inteligncia artificial no desenvolvimento de

sua interface, totalmente intuitivo.

Como voc pode observar nesta opo (Artigos) voc pode escolher a forma que deseja

personalizar os seus artigos.


Barra Lateral


Aqui voc pode personalizar o tamanho da barra lateral, escolher a disposio destas barras

laterais, a configurao do contedo relacionado as barras laterais, cores de preenchimento,

quantidade de barras laterais que variam de uma a duas barras laterais.


Menu vertical


Trabalhe com todas as opes e personalizao possvel para o menu vertical do seu site,

apesar de disponvel em outras abas do site, nesta categoria voc pode personalizar de forma

mais avanada individualmente nesta aba (menu vertical).


Botes


A essa altura voc j percebeu como intuitiva a interface, eu acho que parece muito com a

do Word, sendo que as aplicaes mais eficientes e capazes de lhe retornar mais dinheiro que

o Word, em aplicaes diferentes se que possvel fazer esta equiparao.

Manipule desta forma a aparncia dos seus botes.

Dica

O layout padro o boto grande, caso deseje fazer um layout pro FACEBOOK, lembre de

diminuir o tamanho do boto.


Rodap


As opes de rodap so bem simples, acredito que para melhorar a aparncia seja melhor

editorar depois de instalado pelo prprio painel do Joomla, usando o HTML.

Dica

As vezes voc usa uma cor slida no seu rodap e este aparece de forma clara, isto ocorre

quando est previamente aplicado uma transparncia no rodap, para ajustar esta ocorrncia

v na opo (transparncia) em seguida escolha a opo sem transparncia.


Link de Rodap

Para remover a opo link de rodap na parte superior clique na opo exportar em seguida

clique na opo (opes de exportao...).

Ainda em Link de rodap na opo (exportar) voc ter uma nova janela com 3 opes.

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


Marca Dagua

Para exibir ou remover marca dagua.

Esta ultima opo (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 pgina,

mesmo em templates vendidos para clientes e manter a sua publicidade, acredito que est

seja feita pela excelncia na prestao de servios.


Exportando o seu projeto para publicar no site

Para exportar o seu projeto clique na aba superior no cone da tela de pintura, smbolo do

Artisteer, em seguida clique na opo Exportar, em seguida clique na opo Modelo Joomla.

Nesta prxima tela de um nome ao seu template

(IMPORTANTE no use espao nem caracteres especiais)

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

(exportar como)

opo zipada tem de ser feita pelo FTP do Joomla

enquanto a opo Pasta tem de ser feita pelo FTP do fire FTP ou zipada (importante zipada no

pode ser extenso RAR)


Como Instalar o Joomla no

FACEBOOK


Como criar uma Fan Page

importante que voc crie uma Fan Page para poder instalar o Joomla no FACEBOOK, pois no

perfil de usurio normal no possvel ser feito isso, nem na pgina de grupo, mais detalhes

no curso sobre Redes Sociais.

Passo 1

Acesse qualquer pgina Fan Page no FACEBOOK, na parte inferior clique na opo criar pgina.


Passo 2

Escolha a opo Negcios locais ou lugar de acordo com seu empreendimento.

Depois de clicar na opo desejada aparecer uma opo com dados a serem preenchidos,

desenvolva esta etapa e clique em comear.


Passo 3

Voc ser direcionado a sua pgina FAN PAGE no FACEBOOK.

Clique em curtir e atualize os dados bsicos conforme os textos descritos no item comear.


Passo 4

Insira uma imagem no seu perfil de FAN PAGE.

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

Momento 1

Momento 2


Momento 3

Sua pgina agora est com sua foto.


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 opo (allow permitir).


Passo 3

Copie e cole a URL (localizador de recursos uniformes) do seu site, ou seja, o endereo do seu

site com o protocolo de comunicao completo.

Ex.

http://www.enderecomeusite.com

Caso voc possua mais de uma FAN PAGE no FACEBOOK, pode ocorrer de ser direcionado a

uma nova pgina 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.


Editorando a APPS

Entre na pgina oficial de sua FAN PAGE no FACEBOOK.

Neste momento clique na opo editar.

Uma nova janela ir aparecer no FACEBOOK conforme imagem abaixo.

Clique na opo aplicativos.


Agora na opo aplicativos.

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

A opo IFRAME APPS

Clique na opo editar configuraes para adicionar ou remover esta guia de sua pgina.

Na opo ir para aplicativo voc pode alterar os dados e URL do seu site.


Observe o resultado final da FAN PAGE do Professor.

Andr Rossiter

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


Gerenciando perfil preferencial

Passo 1

Entre na URL de sua FAN PAGE.

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

Clique na opo Editar pgina.

Passo 2

Voc neste momento estar na interface de editorao do perfil de sua Fan Page.

A opo para editorar (definir) sua pgina inicial da Fan Page (gerenciar permisses).


Passo 3

Clique agora na opo guia de destino padro.

Escolha a pgina principal dentre as suas pginas existentes.

Para finalizar lembre de clicar na opo salvar alteraes no final da pgina.

joomlaapostilaandrerossiteroficialcompleta-111212233004-phpapp01.pdf

Documents