Apostila Parte 1

JOOMLA!verso 2.5

2012 Alfamdia Prow2

PARTE I

Mdulo 1: sistemas de gerenciamento de contedo e uma introduo ao joomla

Mdulo 2: Fazendo download e instalando o Joomla

Mdulo 3: Administrao bsica do Joomla

Mdulo 4: Organizando seu contedo

JOOMLA! 2.5

2012 Alfamdia Prow3

MDULO 1: Sistemas de Gerenciamento de contedo e uma introduo ao Joomla!

1.1 O que um sistema de gerenciamento de contedo? (cms)Um Sistema de Gesto de Contedo - SGC, (em ingls Content Management Systems - CMS), um sistema

gestor de contedo para web sites, portais e intranets, que integra ferramentas necessrias para criar, editar e inserir contedos em tempo real, sem a necessidade de programao de cdigo, cujo objetivo estruturar e facilitar a criao, administrao, distribuio, publicao e disponibilidade da informao. A sua maior caracterstica a grande quantidade de funes presentes.

Podemos dizer que um CMS um framework, um esqueleto de web site pr-programado, com recursos bsicos e de manuteno e administrao j prontamente disponveis.

O Joomla! (fala-se Djumla) um exemplo de CMS, utilizado para criao de web sites dinmicos, com possibilidade de insero de componentes das mais variadas funes, quase sempre gratuito.

1.2 Pginas web estticas

Na internet existem milhes de pginas, ainda hoje percebemos algumas estticas. Por conceito, as pginas as estticas so aquelas que no possuem dinamismo em alterao de contedo, ou seja, aquelas que no tem um suporte com Banco de Dados por exemplo. De forma geral so aquelas que o contedo e a apresentao esto no mesmo arquivo. Para a alterao dessas pginas necessrio conhecer cdigo, no mnimo HTML (HyperText Markup Language) e em alguns casos o CSS (Cascate Style Sheet) e para publicao algum sistem de FTP (File Transfer Protocol).

1.3 Pginas web com folhas de estilo

Com o advento da internet no final dos anos 80, passou a ser desenvolvido cada vez mais pginas para a web. Com o tempo ficou cada vez mais necessrio a diferenciao dos sites, e isso se fazia e ainda se faz por cor, imagem, forma de fontes e outros elementos que conseguem fazer com que o site fique diferenciado em relao aos demais. Por isso a existncia dos estilos. Para o uso de folhas de estilo (CSS) nos sites existem trs formas: cdigo Inline, uso interno e uso externo.

Inline: O uso do cdigo inline o que mais tem fora no mtodo cascata, pois ele est direto no cdigo. Para tal usa-se o atributo Style em meio a tag.

ex: Texto

Interno: O uso do css interno feito diretamente na tag Head do site. o segundo mais forte para influenciar no estilo. Para us-lo necessrio usar a tag .

ex: p{color:#FF000}

JOOMLA! 2.5

2012 Alfamdia Prow4

Externo: Para us-lo necessrio ter um arquivo com a extenso .css. Nesse arquivo so colocados todos os estilos. Quando usamos esse formato aliado ao Html, considerado como tableless.

ex: p{color:#FF000}

1.4 Pginas web dinmicasAs pginas dinmicas, por excncia, so aquelas que tm seu contedo alterado de forma rpida e com

alta responsividade. Para termos esse dinamismo necessrio o uso de um administrador do site, que uma pgina separada que normalmente tem acesso por login e senha, assim sendo conhecido com backend, e frontend onde o usurio comum acessa as informaes geradas pelo administrador. Para resumir, o contedo e a apresentao esto separados da pgina web.

1.5 Softwares de cdigo aberto

O marco do cdigo aberto foi a Netscape que em 1998, indo em contra a grandes corporaes desenvolveu o sistema aberto. Os softwares de cdigo aberto (open source) so aqueles em que todos, ou a grande maioria, conseguem ter posse do cdigo, podendo alter-lo e manipul-lo. Um bom exemplo desse tipo de sistema o Linux, que um Sistema Operacional de computador que de ordem livre. Outro grande exemplo o PHP (Personal Home Page ou Php Hypertext Preprocessor) que tem uma comunidade extremamente massiva de usurios. Ainda temos o MySql, que embora seja da Oracle, atua tambm de forma livre e por fim devemos conhecer o Apache, que um servidor para PHP. A manipulao desses sistemas abertos ocasiona em uma grande quantidade de documentao na internet, a partir de fruns, sites especializados, blogs, entre outros.

1.6 A histria do Joomla!Inicialmente o Mambo se tornou um CMS altamente conhecido e usual, em 2004 recebeu diversos

prmios. Por algumas discordncias dos principais programadores do Mambo, resolveram desenvolver o Joomla!. Em 2005, o Joomla! 1.0 surgiu, e desde ento um projeto de cdigo aberto (Licena GNU/GPL), que por usa vez utiliza a linguagem de programao PHP e banco de dados MySQL. Desde ento a verso mais representativa foi a 1.5, onde foram criados milhares de plugins, componentes, temas, mdulos e outras extenses. Na tentativa de deixar o CMS mais dinmico e robusto foram criadas as verses 1.6, 1.7 e 1.8, mas desde a criao eram verses temporrias e de teste. A verso atual do Joomla! e extvel a 2.5.

1.7 Comunidade Joomla!A comunidade Joomla! est cada vez maior, pois o sistema o segundo mais usado do mundo, perdendo

apenas para o Wordpress. O site joomla.org considerado a comunidade oficial. L encontramos diversos contedos e matrias a respeito, alm de suporte. Na parte de extenses (extensions.joomla.org) possvel perceber diversos mdulos, plugins e components, onde necessrio verificar para qual extenso foi desenvolvida.

1.8 Desenvolvimento de extenses de terceiros

JOOMLA! 2.5

2012 Alfamdia Prow5

Na grande maioria das extenses desenvolvidas para Joomla! so de forma livre. Claro que existem algumas verses que so pagas tanto de extenses quanto de templates.

1.9 Caractersticas do joomla

Ao fazer o download do Joomla! se tem um arquivo zipado com aproximadamente 5MB. Em seguida necessrio extrair ou em um FTP ou em um sistema Localhost. Algumas caractersticas so comuns:

- Registro de usurios;- Pesquisas e buscas;- Formulrio simples;- Criao e reviso de contedo;- Detalhe privado de visitao;- Padres RSS;- Carregar notcias de outros sites.

Para dar continuidade ao Joomla! existem diversas extenses entre elas destacam-se:

- Fruns;- Lojas Virtuais;- Calendrios;- Galerias de imagem;- Formulrios de contato.

1.10 Elementos de um website Joomla!Os principais elementos do Joomla! so contedos, mdulos e templates. O conjunto destes elementos

consegue formatar tanto o backend quanto o frontend do site.

1.11 ContedoO contedo a parte mais varivel do site, normalmente administrado pelos componentes. Em alguns

casos pode ser considerado como o corpo principal. Um dica interessante deixar o contedo de forma muito bem visvel, de preferncia centralizado.

1.12 TemplatesO template o layout ou tema do site, assim sendo faz parte do campo visual. Existem templates grtis

e pagos. Um site muito bem elaborado para usarmos template o joomla24.com.

1.13 MdulosOs mdulos so as posies do site e ficam a redor do contedo. Normalmente so usados para criar

menu, rodap e topo.

JOOMLA! 2.5

2012 Alfamdia Prow6

2.1 Como instalar o Joomla! necessrio primeiro baixar o Joomla!, de preferncia do site principal joomla.org. Logo em seguida

necessrio descompact-lo em um servidor, Local ou On-line. E por ltimo, via navegador, basta acessar os dados de instalao.

2.2 Obtendo o mais recente pacote de arquivos do Joomla!Diretamente na pgina principal do joomla.org possvel encontrar ao lado direito. (verificado em junho

de 2012). Basta clicar em download e abrir uma nova pgina que pode-se de fato fazer o download.

2.3 Convenes de nomenclatura de pacotes do Joomla!Para baixar o Joomla!, percebemos que a ltima verso a 2.5.x, onde x um nmero crescente onde

cada nova verso so realizadas melhorias. Para baixar componentes, mdulos, templates, entre outros sempre necessrio vislumbrar para que verso os mesmos foram desenvolvidos. Outras verses do Joomla! j adotavam esse tipo de prtica. Contudo precisamos saber que no h uma continuidade latente entre as verses, ou seja, elementos do 1.5 no so compatveis com a 2.5.

MDULO 2: Fazendo download e instalando o Joomla!

[Fig. 1] Site oficial joomla.org

[Fig. 2] Representao das foras das verses do Joomla!

JOOMLA! 2.5

2012 Alfamdia Prow7

2.4 Criando um banco de dados mysqlPara acessar o Banco de Dados MySql de forma local, necessrio entrar em Localhost pelo Browser e

acessar no menu Tools, e clicar onde est escrito phpmyadmin. Para criar um banco de dados, basta escrever qual o nome que ser usado no Banco e ao lado de Collation clicar em criar.

2.5 Descompactando o pacote Joomla!Para descompactar o Joomla! necessrio um programa de tipo zip, de preferncia ou o WinZip ou o

WinRar. Se algum destes programas j estiver instalado no computador, notadamente o smbolo do Joomla! ficar com o cone padro do mesmo.

2.6 Descompactando o Joomla! no seu computador pessoalPara descompactar o Joomla! localmente necessrio ter instalado de preferncia ou o WAMP (Windows

Apache MySQL Php) ou o XAMPP (X qualquer sistema operacional, Apache, MySql, Php e Perl). Na maioria dos casos, ao fazer a instalao criada uma pasta para criar e desenvolver os sites em computador pessoal. Um bom exemplo disso usar o caminho C:\wamp\www e ali criar uma pasta com o nome do cliente. Nessa nova pasta realizada a descompactao dos arquivos. Para cada novo site necessrio criar uma pasta e descompactar novamente.

2.7 Descompactando o Joomla! em uma conta de hospedagemPrimeiramente necessrio ter uma hospedagem com capacidade mnima de 20MB, acesso Apache, de

[Fig. 3] MySql atravs do Painel de Controle PhpMyAdmin

JOOMLA! 2.5

2012 Alfamdia Prow8

preferncia em um servidor Linux e acesso a Banco de Dados MySql. Para acessar o diretrio Root preciso de um sistema FTP (File Transfer Protocol), onde o mesmo ir precisar de um endereo, login e senha.

Endereo ou Host: ftp.dominio.com.brLogin ou Nome de usurio: dominioSenha: 123456

A partir dessas descries possvel acessar o Root do site, que algumas vezes poder abrir direto ou estar em uma pasta chama public_html ou mesmo em uma pasta www. Para fazer o acesso poder ser usado um software chamado FileZilla Client que Open Source. Para transferir basta selecionar e arrastar para a pasta onde se deseja que o site aparea.

2.8 Rodando o wizard de instalao do Joomla!Para rodar o wizard antes necessrio instalar em computador pessoal ou em uma hospedagem. Para

acessar use um browser (Google Chrome ou Mozilla Firefox de preferncia), caso seja feito local para uma pasta chamada cliente, acesse http://localhost/cliente e para uma hospedagem, caso no Root, use o acesso principal http://www.dominio.com.br. A seguir teremos os passos para a instalao do Joomla!

2.9 Passo 1: idiomaNesse passo possvel escolher a linguagem de instalao.

[Fig. 4] Painel de abertura FileZilla

[Fig. 5] Idioma de instalao

JOOMLA! 2.5

2012 Alfamdia Prow9

2.10 Passo 2: verificao de pr-instalao

Nesse passo insteressante notar todos os pr-requisitos. Normalmente se tudo est ok, o prprio instalador avisa.

2.11 Passo 3: licena interessante para quem ir passar a usar o Joomla! ler seus termos de licena.

[Fig. 6] Verificao de instalao

[Fig. 7] Licena

JOOMLA! 2.5

2012 Alfamdia Prow10

2.12 Passo 4: configurao do banco de dados

Este passo talvez seja o mais importante, pois nele feita toda a configurao Banco de Dados e site.

No tipo de Banco de Dados escolha Mysql, o nome do servidor em caso local deve ser localhost, o nome de usurio padro root, no h senha padro no WAMP. E o nome do Banco de Dados deve ser aquele que foi criado via phpMyAdmin. Os prefixos so gerados randomicamente no Joomla! 2.5, anteriormente era usado jos_. Estes casos s so necessrios se exitem diversos dados no mesmo DB (Data Base).

2.13 Passo 5: configurao do ftp

A configurao de FTP necessrio caso seja desejo fazer alteraes nas pastas.

[Fig. 8] Banco de Dados

[Fig. 9] Configurao do FTP

JOOMLA! 2.5


2.14 Passo 6: configurao principal

A configurao principal a segunda parte mais importante, pois nela fazemos algumas definies do site. O nome do site ser atribudo a tag title, entre outros. O e-mail necessrio para que atualizaes, cadastros e outras funcionalidades do Joomla! seja direcionadas. O nome de usurio padro admin, embora seja sugerido para que no se use esse nome. A senha que deve ser repetida, deve ser de preferncia uma senha com letras maisculas, minsculas, nmeros, misturados e tambm inserido um ou outro smbolo, para dificultar sua decriptao. A instalao de contedo no obrigatria e tambm usual para estudos no para um site profissional.

2.15 Passo 7: finalizao[Fig. 10] Configurao

[Fig. 11] Fim

JOOMLA! 2.5


MDULO 3: Administrao bsica do Joomla!

3.1 O que so o frontend e o backend de um website joomla?Para definirmos os termos de forma direta, o Backend o gerenciador e o frontend onde o usurio

visualizar o site. Para acessar necessrio usar o caminho normal do site + /administrator. Aquele login e senha criados devem ser inseridos para acessar o sistema administrador.

[Fig. 12] Painel de entrada do Backend

[Fig. 13] Painel j acessado do Backend

JOOMLA! 2.5


3.2 Menu barNesse menu possvel acessar todas as principais funes do Joomla!.

3.3 ToolbarA barra de ferramenta pode ser visualizada em diversas partes do Joomla!. Nela possvel perceber

alguns cones que tem influncia na criao de contedo ou de outros elementos.

3.4 WorkspaceO workspace a parte central do CMS Joomla!, onde cada componente, mdulo, template ou outro

consegue dar acesso a diversos administradores.

3.5 Funes do administrador na barra de menuAo longo deste material poderemos aprofundar as funes da barra de menu, com foco em controle e

gerenciamento.

3.6 O menu siteExistem diversas funes no submenu, entre elas destaca-se a configurao.

[Fig. 14] Barra de menu do gerenciador

[Fig. 15] Exemplo de Toolbar do artigo

[Fig. 16] Menu site

JOOMLA! 2.5


3.7 O menu usersNesta seo possvel adicionar e remover usurios, assim como criar tipos de acesso a usurios.

basicamente existem dois grandes grupos de usurios, os que acessa apenas pelo Frontend e os que acessam pelo Backend (tambm conseguem acessar pelo Frontend).

Acessam pelo Backend:Super User, Administrator e Manager

Acessam pelo Frontend:Registered, Author, Editor e Publisher

3.8 O menu menus

3.9 O menu content

[Fig. 17] Menu users

[Fig. 18] Menu menus

[Fig. 19] Menu content

JOOMLA! 2.5


3.10 O menu componentsNesse menu podemos acessar os componentes bsicos do Joomla!. Normalmente outros componentes

instalados acabam adicionando um link a mais nesse painel.

3.11 O menu extensions Nesse menu possvel instalar elementos no Joomla!, adicionar, remover, editar e deletar mdulos,

plugins, temas e idiomas.

3.12 O menu help

[Fig. 22] Menu help

[Fig. 20] Menu components

[Fig. 21] Menu extensions

JOOMLA! 2.5


3.13 Preview do sitePara visualizar o site depois da alterao no painel basta clicar no View Site.

[Fig. 23] Link view site

[Fig. 24] Site visualizado - Frontend

JOOMLA! 2.5


MDULO 4: Organizando seu contedo

4.1 Como o Joomla! cria pginas web?A base a mesma de criao de pginas em PHP, pois a estrutura do Joomla! nessa linguagem.

No organograma acima podemos perceber que o site possui uma estrutura principal (Site) e trs braos (Sobre, Servios e Contato). Para tal pode ser desenvolvido a partir do uso de:

Componentes: parte central do site, um bom exemplo a insero de artigo;

Mdulos: posicionamento dos elementos, menu por exemplo.

4.2 Como o Joomla! organiza os artigos de contedo?

Um site pode conter poucos artigos, em caso de sites mais simples, ou uma gama muito elevada para grandes portais e difusores de notcias, assim como em blogs. Existem algumas opes para organizar os artigos, entre eles o contedo total e apenas uma parte do contedo (leia mais).

4.3 Artigos no categorizados

Quando no determinamos categorizao para os artigos, deixamos o mesmo de forma solta. No que o mesmo no possa ser carregado a partir de um menu de tipo artigo.

[Fig. 25] Organograma de um site.

JOOMLA! 2.5


4.4 CategoriasPara sites que tenham um grande nmero de artigos, ou ento, que possuam uma conduo constante

de notcias, necessrio criar categorias. As categorias servem para agrupar artigos de mesma relevncia ou assunto. Para um site que a nica informao acrescida sero notcias de forma ampla, interessante criar apenas uma categoria de nome notcias.

4.5 Amostra de hierarquiaPara a criao de hierarquia no existe o que era comum no Joomla! antigamente, as sees. Hoje em

dia, temos a possibilidade de criar item pai. O item pai seria a categoria mais ampla, enquanto o item filho, categoria mais especfica.

Exemplo: Poderamos criar uma categoria de nome Esportes e assim sendo criar categorias filha, Futebol, Basquete, Frmula 1, UFC, entre outros ligados aos esportes.

4.6 Criando o website widget inc. com contedo no categorizadoA maneira mais fcil de criar artigo no criar categoria para o mesmo.

4.7 Criando artigos de contedo

Na figura 26 possvel perceber um sinal de MAIS onde est escrito novo, ali possvel criar novo artigo. Para criar o artigo basta escolher o nome do mesmo, se ser publicado j ou criar uma data para a publicao, colocar o nvel de acesso do artigo que por padro pblico. E em meio ao escrever o contedo. Acima existe um painel auxiliar de edio, como se fosse um mini word. Obviamente que para todo e qualquer site bsico o conhecimento de HTML, CSS e Webstandards.

[Fig. 26] Gerenciador de artigos

JOOMLA! 2.5


4.8 Criando itens de menuTodo e qualquer site em Joomla! tem como base um menu. Por padro existe um Main Menu que est

subentendido a existncia de um Home que pertence a pgina inicial. Podemos criar diversos menus e os mesmos podem ser carregados independentemente em partes separadas do site. Para ver as posies necessrio liber-los no painel de template.

4.9 O componente front page pgina inicialA pgina inicial pode ser usada a partir de apenas um contedo, ou diversos.

4.10 Criando categorias

[Fig. 27] Gerenciador de menus

[Fig. 28] Gerenciador de categorias

JOOMLA! 2.5


Assim como para criar um artigo, para criar uma categoria basta clicar em novo e assim escolher qual o nome da categoria e se mesma ter alguma categoria pai (em caso de ser subcategoria).

No planejamento do site isto deve ser especificado.

Apostila Parte 1

Documents

Transcript of Apostila Parte 1