Joomla

4,634 views
4,507 views

Published on

Baseada em diversos profissionais.
Elaborada por André Rossiter.
download vídeo aulas e tutoriais exclusivos em http://www.midiasbr.com

me siga no twitter http://www.twitter.com/arbf

me acompanhe no facebook http://www.facebook.com/tutorbrasil

assine meu perfil oficial do facebook http://www.facebook.com/andrerossiter

meu canal oficial no youtube http://www.youtube.com/user/tedboy1977

meu canal oficial no slide share http://www.slideshare.net/arbf

google plus https://plus.google.com/i/z7KAIyYhR3k:Nuwo4Axptbk

Sala de aula virtual URL: http://connectnow.acrobat.com/webrossiter (apenas com agendamento)

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,634
On SlideShare
0
From Embeds
0
Number of Embeds
539
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Joomla

  1. 1. André Rossiterwebrossiter@gmail.com André Rossiterwebrossiter@gmail.com
  2. 2. André Rossiter webrossiter@gmail.comÍndiceIntrodução ............................................................................................................................. 3O que é CMS .......................................................................................................................... 4Introdução Joomla ................................................................................................................. 5A estrutura do Joomla ............................................................................................................ 6Como contratar uma hospedagem ........................................................................................ 8Como instalar no Servidor UOLHOST ..................................................................................... 9O painel de controle ............................................................................................................. 10Menu configuração geral ...................................................................................................... 16Menu configuração usuário .................................................................................................. 19Arquitetura da Informação ................................................................................................... 21Seção, categoria, artigo e menu ........................................................................................... 28Plug in, complementos, temas, extensões, FTP ................................................................... 38Artisteer – Como fazer o meu template ............................................................................... 50Instalando o Joomla no FACEBOOK ...................................................................................... 66
  3. 3. André Rossiter webrossiter@gmail.comIntroduçãoA 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 diferencialpara se estabelecer no mercado de trabalho, ganhar dinheiro sem sair de casa ou até mesmoos dois.O presente curso visa ilustrar o Joomla como forma de empreender e desenvolver sistemaspara rede mundial de computadores, de forma simples através de sua tecnologia moderna efuncional em pouco tempo.
  4. 4. André Rossiter webrossiter@gmail.comO que é CMSCMS é a abreviação da expressão da língua inglesa (contente management system – sistemade gerenciamento de conteúdo).A plataforma CMS é open source (código fonte aberto) o que permite o desenvolvedormanipular 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ãofeitos por programadores e desenvolvedores ao redor do mundo eleitos por meritocracia eviabilizam cada vez mais com menos conhecimento desenvolver sistemas e aplicaçõescomplexas de serem feitas do zero.Outra grande vantagem deste tipo de sistema é que pessoas muito capazes como descritoanteriormente ao redor do mundo trabalham em conjunto na evolução de segurança einterface 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çãoo que pode ser repassado para o cliente e torna os empreendimentos mais viáveis.
  5. 5. André Rossiter webrossiter@gmail.comIntrodução Joomla“Desenvolvido a partir do Mambo. É escrito em PHP e roda no servidor web Apache ou IIS ebanco 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)
  6. 6. André Rossiter webrossiter@gmail.comGoogle Trends é uma ferramenta do Google Labs que mostra os mais populares termosbuscados em um passado recente.A ferramenta apresenta gráficos com a frequência em que um termo particular é procuradoem várias regiões do mundo, e em vários idiomas. O eixo horizontal do gráfico representatempo (a partir de algum tempo em 2004), e o vertical é com que frequência é procurado umtermo, globalmente. Também permite o usuário comparar o volume de procuras entre duasou mais condições. Notícias relacionadas aos termos buscados são mostradas ao lado erelacionadas com o gráfico, apresentando possíveis motivos para um aumento ou diminuiçãodo volume de buscas. (Wikipedia)Grafico comparativo Joomla e outros CMS pelo GOOGLE TRENDS
  7. 7. André Rossiter webrossiter@gmail.comA estrutura do JoomlaO Joomla possui uma interface front end (design) do lado cliente desenvolvida pelo HTML eCSS, possui em seu back end (programação) um sistema seguro utilizando PHP (linguagem deprogramação orientada ao objeto) e um banco de dados MYSQL onde são armazenados osdados inseridos e atualizados do Joomla.Esta é na verdade a estrutura de um sistema para internet mais complexo e se repete paradiversos outros sistemas, mas cabe bem ao Joomla e corresponde a forma como ele foidesenvolvido.
  8. 8. André Rossiter webrossiter@gmail.comComo contratar uma hospedagemRecomendo um servidor grande, pois oferecem suporte 24hs, possuem manutenção commaior frequência que servidores pequenos e de um modo geral as máquinas são maismodernas e para finalizar o que acredito ser o mais importante é a estrutura de segurançaquanto aos aspecto de redes na sua configuração.Você deve contratar uma hospedagem do tipo LINUX, pois trabalha bem com aspectosrelacionados 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 aoexceder 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, planoeconô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 oferecemo domínio grátis no primeiro ano.
  9. 9. André Rossiter webrossiter@gmail.comComo instalar no Servidor UOLHOSTPasso 1Entre 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 2Na segunda tela na parte inferior clique em instalador automático de aplicativos.
  10. 10. André Rossiter webrossiter@gmail.comPasso 3Na parte inferior clique na opção a direita do CMS desejado a se instalar que no nosso caso é oJoomla.Passo 4Preencha os campos existentes na tela, (escolha o diretório) em seguida clique em instalar.
  11. 11. André Rossiter webrossiter@gmail.comO painel de controlePara acessar o seu painel de controle digite a url do site + administrator.Ex. www.meusite.com/administratorNesse momento digite o seu login e senha definidos no momento da instalação.DicaEscolha sempre uma senha segura, pois muitos hackers e crackers tentam invadir os sites naweb, seja para mudar os artigos, seja para deletar arquivos, seja para roubar dados de seusclientes 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 detrabalho por terem uma senha fraca e terem sido invadidos.
  12. 12. André Rossiter webrossiter@gmail.comA primeira tela do painel de controleEsta é a tela inicial quando você loga no Joomla, todas as funcionalidades do Joomla, desde amais simples até a mais complexa pode ser feita a partir desta interface.O menu superior siteEste primeiro menu superior trabalha com: configurações globais do servidor, mídias parapublicação e atualização FTP pela interface do Joomla, usuários, tipos de usuários, alteração desenhas e retorno ao painel inicial do Joomla, a navegação também pode ser feita pelos ícones.
  13. 13. André Rossiter webrossiter@gmail.comO menu superior menusEsta aba é responsável por ligar as categorias criadas por você através de menus de navegaçãoe algumas aplicações são baseadas neste menu referido. Complemento nas vídeo aulas docurso.O menu superior conteúdoEste 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ógicae na arquitetura de navegação do seu site.
  14. 14. André Rossiter webrossiter@gmail.comO menu superior componentesEste menu vem com algumas aplicações extras que existem para o Joomla e outras você podeinstalar.Ex. o componente Jmultimídia visto em nossa vídeo aula sobre implementação de vídeo nosite, por padrão o componente de contato existente nele por padrão também abordado emnossa vídeo aula.O menu superior extensõesNeste menu você pode instalar temas, plug-ins, componentes, aplicativos, dentre outrosdiversos, além de manipular e trabalhar com seus temas e acessar o HTML e CSS da páginarelacionados ao seu site.
  15. 15. André Rossiter webrossiter@gmail.comO menu superior ferramentasUma 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 pessoascadastradas de uma só vez.O menu superior ajudaEsta 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.
  16. 16. André Rossiter webrossiter@gmail.comMenu configuração geralNo menu de configuração inicial você encontra várias aplicações importantes, como porexemplo a configuração do SMTP que torna possível o envio e recebimento de e-mail pelo seusistema de mensagens do Joomla (extensão).IMPORTANTEA opção 1 em vermelho é a única desta categoria que está presente em todos os painéis deconfiguração global. Confira abaixo a opção site.Opção 2 em verdeLhe possibilita desabilitar o site para visualização do visitante enquanto você o implementa econfigurar 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 naconfiguraçã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 osusuários do sistema será notificado pelas mensagens do mesmo decorrente da interação como usuário.Opção 3 em amareloEquivalente a meta description do site e as palavras chave, aplicação SEO.Opção 4 em azulA opção URL amigável é uma boa aplicação em SEO, mas em alguns momentos habilitar esterecurso pode dar problemas na integração com o banco de dados, neste caso basta desativarnovamente.
  17. 17. André Rossiter webrossiter@gmail.comTela configuração global opção sistema.Opção 1 em azulParâmetros do sistema como caminho do FTP, não deve mexer na editoração do sistemabásico, observe que ele já vem ativo e configurado pela instalação de forma automática.Opção 2 em vermelhoInterage 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.Opção 3 em amareloO Joomla possui módulos e extensões que lhe permitem interagir com o sistema por uploadtanto para o administrador quanto para o usuário, e neste caso da configuração global para oadministrador o legal é restringir extensões de tipos de arquivos para interação imediata, oque ajuda a proteger o sistema.Opção 4 em verdeO Joomla para segurança do administrador e do visitante desconecta o internauta ouadministrador também por 15 minutos de inatividade no sistema, e neste aplicativo você podealterar este parâmetro. Cuidado para não prolongar muito, porem 15 minutos é realmentemuito 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.
  18. 18. André Rossiter webrossiter@gmail.comTela configuração global opção servidor.Opção 1 em amareloJuntamente com as demais opções desmarcadas ( configurações FTP e configurações de bancode dados) dizem respeito ao sistema, através deste comandos e manipulação você podemudar diretórios, banco de dados. Ex. redirecionar o site para outra hospedagem depois queele já está publicado.Opção 2 em verdeA grande vantagem deste painel de codificação é a questão de horário para controle de acessode usuários do seu sistema. Através desta opção você sabe o horário que as pessoas entraramno seu sistema, ou horário que fizeram manipulações, e até mesmo caso você queira manterhorário de suas publicações este sistema tem de estar configurado de acordo com sua posiçãogeográfica possível de configuração neste item.Opção 3 em vermelhoEste 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.
  19. 19. André Rossiter webrossiter@gmail.comMenu configuração usuárioPasso 1Observe 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 verdeVocê observa nome de registro e nome do membro cadastrado no site.Na imagem 2 em vermelhoVocê pode observar nível de acesso do usuário e se ele está registrado ou não.Na imagem 3 em amareloVocê tem acesso ao email do usuário e data do ultimo acesso.Na imagem 4 em azulVocê tem acesso ao painel de adicionar novo usuário, editorar e remover estes.
  20. 20. André Rossiter webrossiter@gmail.comPasso 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 doseu 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çãodo site.Administrator: gerencia os conteúdos, inclui, exclui, publica e despublica, e também podeadministrar os usuários.Super Administrator*: tem acesso total a administração do site e somente ele pode criar umoutro usuário Super Administrator.
  21. 21. André Rossiter webrossiter@gmail.comArquitetura da Informação“A arquitetura(PB) — (do grego arché — αρχή — significando "primeiro" ou "principal" etékton — τέχνη — significando "construção") refere-se à arte ou a técnica de projetar e edificaro ambiente habitado pelo ser humano. Neste sentido, a arquitectura trata destacadamente daorganização do espaço e de seus elementos: em última instância, a arquitetura lidaria comqualquer problema de agenciamento, organização, estética e ordenamento de componentesem qualquer situação de arranjo espacial. No entanto, normalmente a arquitetura associa-sediretamente ao problema da organização do homem no espaço (e principalmente no espaçourbano)”. http://pt.wikipedia.org/wiki/ArquitecturaTalvez você esteja se questionando o porquê de falar sobre arquitetura da informação se estecurso for o seu primeiro contato com sistemas para internet.Um site simples com poucos links tipo (home, serviços, quem somos e contato) isso realmentepode não ser o mais relevante, porem os melhores empreendimentos e a grande vantagemdo Joomla é a possibilidade de desenvolvimento de sistemas mais complexos voltado paraportais e grandes sites, apesar de atender bem as necessidades de sistemas simples e nessemomento a compreensão de arquitetura da informação é imprescindível para os seus estudose desenvolvimento no Joomla.Natureza da informaçãoExiste uma tendência a pensar que as classificações são naturais ou óbvias, ou lógicas. Ouainda “só tem esse jeito” de fazer.Na verdade o que existem são convenções mais ou menos aceitas por um determinado grupode usuários, pois a forma como as pessoas representam a informação dentro de sua própriamente 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
  22. 22. André Rossiter webrossiter@gmail.comRoteiro de produção para a webObjetivo:Compreender a dimensão global de um projeto para a web, e onde a AI se encaixa durante oprocesso 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 & DesejosDocumento de requisitosDocumento construído a partir das interações entre o cliente e o desenvolvedor. Trata-se deum documento técnico onde constam informações descritivas sobre o sistema, suasfuncionalidades, 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 paraa próxima etapa.
  23. 23. André Rossiter webrossiter@gmail.com 2. Arquitetura geral do sistemaOrganização lógica do fluxo de navegação e interação do sistema. Pode ser indicial e/ougráfica. Trata-se de um documento produzido pelo desenvolvedor para orientar a produção. Odesenvolvedor só passa para a quarta etapa depois da aprovação do documento dearquitetura geral do sistema pelo cliente.
  24. 24. André Rossiter webrossiter@gmail.com 3. WireframeOs wireframes são representações esquemáticas (gráficas) dos “layouts únicos” das telas dosistema. Indicam o posicionamento dos conteúdos na tela. São “esqueletos” que servem parafundamentar os layouts
  25. 25. André Rossiter webrossiter@gmail.com 4. LayoutLayout é o desenho da página, conhecido como “design”. Representação gráfica completa comtodos 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 softwarescomo Photoshop, Fireworks, Corel, etc. A implementação só começa após a aprovação dolayout pelo cliente.
  26. 26. André Rossiter webrossiter@gmail.com 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.
  27. 27. André Rossiter webrossiter@gmail.comFinalizaçã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.TestesApós a implementação, o sistema precisa ser testado em laboratório. Publica-se o site em umaURL “escondida”, para simular condições reais de uso, e montam-se grupos de usuários cujosperfis foram definidos no documento de requisitos. Se forem detectados problemas nausabilidade retorna-se à implementação para eventuais consertosDocumentaçãoDurante o processo de implementação, são anotadas informações importantes sobre o website 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.EntregaA entrega é a conclusão do projeto. Implica na disponibilização para o cliente do web site naURL indicada por ele na fase do briefing ou na entrega do conteúdo para que o cliente cuide dapublicação. Fonte (Arquitetura da Informação): Romulo Cesar Pinto
  28. 28. André Rossiter webrossiter@gmail.comSeção, categoria, artigo e menuAparentemente este aspecto complicado relacionado a categorização é uma das grandesvantagens do Joomla, pois ao criar um sistema de categorização complexo, porem completo oJoomla permite que você trabalhe com sistemas para internet de grande complexidade comoportais de grande porte.Antes de começar a desenvolver o seu site é importante que você trabalhe aspectos como aarquitetura da informação vistos no capitulo anterior.SeçãoDevemos 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 oucriar novas seções.Para criar uma nova seção clique no botão novo em verde na parte superior a direita,conforme imagem ilustrativa.
  29. 29. André Rossiter webrossiter@gmail.comEditorando a nova seçãoA parte detalhes em título preencha o nome relacionado a sessão, este deve ser coerentecom a futura categoria relacionada a esta.O apelido não é preciso completar, mas caso deseje fazer, repita o nome dado no titulo semdeixar 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 acessarRegistrado – o usuário deve ser cadastrado para ter acesso ao conteúdo.
  30. 30. André Rossiter webrossiter@gmail.comCategoriaDeve 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 emseguida clique na opção administrar categorias.Nesta próxima tela, você pode editorar categorias existentes, excluir estas mesmas categoriasou criar novas categorias.Para criar uma nova categoria clique no botão novo em verde na parte superior a direita,conforme imagem ilustrativa.
  31. 31. André Rossiter webrossiter@gmail.comEditorando a nova categoriaA parte detalhes em título preencha o nome relacionado a categoria, este deve ser coerentecom a seção que será relacionada obrigatoriamente.O apelido não é preciso completar, mas caso deseje fazer, repita o nome dado no titulo semdeixar espaços em branco (use underline).ImportanteExiste 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).A opção nível de acesso foi descrita em capítulos anteriores, mas observe um breve resumo.Publico – todos podem acessarRegistrado – o usuário deve ser cadastrado para ter acesso ao conteúdo.
  32. 32. André Rossiter webrossiter@gmail.comArtigoDeve ser feita depois da Seção e Categorias ou pode ser órfão relacionado a um Menu noJoomla 1.5, o visto neste curso.Para acessar e poder criar Artigos no seu menu superior clique no menu conteúdo em seguidaclique na opção administrar artigos.Nesta próxima tela, você pode editorar artigos existentes, excluir estas mesmos artigos oucriar novos artigos.Para criar uma novo artigo clique no botão novo em verde na parte superior a direita,conforme imagem ilustrativa.
  33. 33. André Rossiter webrossiter@gmail.comEditorando o novo artigoA parte detalhes em título preencha o nome relacionado a categoria e seção, este deve sercoerente com a seção que será relacionada, porem artigos podem ser órfãos relacionadosapenas a MenusO apelido não é preciso completar, mas caso deseje fazer, repita o nome dado no titulo semdeixar espaços em branco (use underline).ImportanteVocê terá obrigatoriamente que associar este artigo a uma seção e categoria, ou escolherqualquer 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).A opção nível de acesso foi descrita em capítulos anteriores, mas observe um breve resumo.Publico – todos podem acessarRegistrado – o usuário deve ser cadastrado para ter acesso ao conteúdo.
  34. 34. André Rossiter webrossiter@gmail.comMENUDeve ser feita depois da Seção e Categorias ou pode ser órfão relacionado a um ARTIGOORFÃO no Joomla 1.5, o visto neste curso.Para acessar e poder criar Menus no seu menu superior clique no menu conteúdo emseguida clique na opção Main Menu.Nesta próxima tela, você pode editorar Menus existentes, excluir estes mesmos Menus oucriar 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 doJoomla para os artigos, seções e categorias criados, o Menus pode estar relacionado a cadaum 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,conforme imagem ilustrativa.
  35. 35. André Rossiter webrossiter@gmail.comEditorando o novo MenuApos ter clicado em novo Menu no item anterior você será direcionado a esta telarepresentada 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 ouartigos criados nas etapas anteriores).Link (relaciona encaminhamento de uma página para outra, dentro ou fora do diretório doseu 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ídeoaula sobre formulário de contato).JMultimidia / Jumi (relacionado a plug-ins que instalamos conforme as vídeo aulas, casodeseje criar algum menu relacionado a conteúdo criado por estes escolha a respectiva opção).
  36. 36. André Rossiter webrossiter@gmail.comAlgumas das categorias possuem subcategorias em sua seleção.ExemploA 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 compreenderde 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émreforço a importância de se praticar e desenvolver cada uma destas categorias de item demenu e esta etapa interfere na apresentação e diagramação do seu site de forma indireta nadisposição do conteúdo relacionado a seção, categorias e artigos.
  37. 37. André Rossiter webrossiter@gmail.comTerceira e última etapa na criação de seu Menu.Tipo do Item de MenuNesta etapa você pode ré editorar o Item de Menu visto na página 36.Detalhes do Item do MenuNesta etapa é possível nomear este menu, relacionar a posição do Módulo do Menu, tipo depublicação, nível de acesso e Target (mesma janela ou nova janela de navegação).Parâmetros básicosNesta opção você pode relacionar a seção que deseja que este menu seja vinculado, destaquesde 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 dicaAquela opção Welcome to FrontPage remove-se em (parâmetros do sistema – deletando onome ou alterando para outro de acordo com seu desejo ou necessidade).
  38. 38. André Rossiter webrossiter@gmail.comPlug in, complementos, temas, extensões, FTPPlug-ins, complementos e temas são todos considerados extensões pelo Joomla.ExtensõesA base para instalar qualquer complemento, Plug-in, ou tema pelo seu painel de controle noJoomla é 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çãoInstalar/Desinstalar.ImportanteVerifique se a extensão, plug-in, tema ou qualquer outro tipo de aplicativo a ser quanto a suacompatibilidade com a sua versão do Joomla, já que nem todo aplicativo é compatível comtodas as versões.
  39. 39. André Rossiter webrossiter@gmail.comInstalando AplicativosNeste 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 eclique em abrir.Neste momento clique em Enviar arquivo e instalar.
  40. 40. André Rossiter webrossiter@gmail.comO sistema é inteligente e informa as etapas, desta forma depois de clicar em enviar e instalararquivos aguarde a mensagem de confirmação do sistema sobre o sucesso da etapadesenvolvida por você conforme modelo abaixo.ObservaçãoA maioria dos casos que dá falha na instalação de um plug-in, complemento ou tema é pelaincompatibilidade 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óximacategoria deste capitulo Temas.Para administrar o Tema selecionado clique no menu superior Extensões em seguidaadministrar tema.
  41. 41. André Rossiter webrossiter@gmail.comTemas & Administrar TemaPara Administrar Tema, remover temas ou alterar clique no menu superior em Extensões emseguida escolha a opção Administrar Tema.Nesta próxima tela você poderá observar os temas que você tem instalado, remover, ouadulterar. Para definir um tema padrão clique no radio buton ao lado esquerdo do nome dotema em seguida clique em padrão (ele ficará com a estrela de padrão conforme imagemabaixo.)
  42. 42. André Rossiter webrossiter@gmail.comPara 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), adicionarmódulos, remover módulos, inserir o analytics, dentre outras funções que você possaadicionar pelo HTML.Observe o editor HTML.Lembre de clicar em salvar após as alterações, nesta tela e na tela principal posterior.
  43. 43. André Rossiter webrossiter@gmail.comEditor de CSS do TemaEsta tela pode variar de acordo com o seu tema, porem é importante que saiba que é comumhaver 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.
  44. 44. André Rossiter webrossiter@gmail.comPlug-in & ComplementosPara 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 ocomponente de vídeo instalado (o mesmo abordado na vídeo aula desenvolvida por AndréRossiter) no seu box de estudos.FTPFTP é 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 nahospedagem da UOLHOST, em seguida também através de imagens ilustrativas falo sobre ainterface do FIRE FTP que utilizaremos para baixar templates, publicar templates, fazeralterações e o que for necessário implementar no site através da transferência de arquivospelos protocolos web.
  45. 45. André Rossiter webrossiter@gmail.comComo criar uma senha de FTP pelo painel de controle da UOLHOST1 passo- acesse a sua conta e clique na opção: painel de controle/ construtor de sites2 passo- clique na opção trocar senha de FTP
  46. 46. André Rossiter webrossiter@gmail.com3 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 osdados 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 FTPComo acessar o FIRE FTP1 Passo- Instale o programa, depois acesso a área de FTP
  47. 47. André Rossiter webrossiter@gmail.com2 Passo- Abrirá a tela. Compreenda a interface.Opção 1- Corresponde a área de editoração:a) configurar uma nova conexão FTPb) navegar entre diversas conexões FTPc) alterar dados de conexão FTPd) deletar uma conexão FTPOpção 2- Corresponde a interface de navegação do seu computador e a tela presente possui osarquivos que você poderá atualizar no seu diretório web, através dos protocoloscliente/servidor pela própria interface do programa.Opção 3- Corresponde a interface de arquivos do servidor web onde seus arquivos podem serpublicados e o seu site hospedado. Este modelo mostra a imagem do servidor antes de serconectado.Opção 4- Descrições um pouco mais teóricas que definem ações executadas por suas ações através dainterface como forma de comunicação cliente/servidor. É necessário conexão com a internetpara usar o programa.
  48. 48. André Rossiter webrossiter@gmail.com3 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, apenasaltere inserindo os dados de seu site nos campos descritos.Host, Login, Password
  49. 49. André Rossiter webrossiter@gmail.comModelo da página configurada interagindo com o Servidor Web.Pela hospedagem WindowsPela hospedagem LinuxOBS. Note que a navegação Windows e Linux ocorre por diretórios diferentes, mas a base é denavegação básica para acessar, como o Explorer.
  50. 50. André Rossiter webrossiter@gmail.comArtisteer – Como fazer meu templateTela inicial do programaÉ importante que você saiba que existem diversas versões do Artisteer e que de acordo com asua versão esta interface inicial pode variar, apresentando mais ou menos recursos.O Artisteer é um software (programa) de computador que interage pela sua interface deforma mais simples desenvolvendo temas para web sites em plataformas como: Joomla,Wordpress, Drupal, DotNetNuke, Blogger, Aplicações ASP, Aplicações Net e code ChargeStúdio.Nesta tela inicial você pode e deve escolher a plataforma web que deseja trabalhar parapoder seguir para a próxima etapa, em nosso caso iremos usar no curso a plataforma doJoomla.
  51. 51. André Rossiter webrossiter@gmail.comIrei 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 oprograma 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 aosnomes descritos em cada etapa.
  52. 52. André Rossiter webrossiter@gmail.comCores e fontesNesta aba (cores e fontes), apesar de possuir uma opção (sugerir cores) você pode navegarentra as opções e escolher cores por conta própria, além de definir a tipografia do site ougrupo 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 fontesdiferentes apesar de bonitas podem acabar prejudicando o seu layout.ExemploNas 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 deapresentação de formas e tamanho das fontes no caso do internauta não possuir a fonte quevocê usou no seu layout.A minha sugestão é que use uma fonte da família sem serifa, tipo arial, verdana ou derivadas.
  53. 53. André Rossiter webrossiter@gmail.comDisposiçãoNesta opção (disposição) você pode escolher o posicionamento dos links, a disposição dascolunas 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 mesmodepois 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 doseu projeto, outra coisa interessante é que você pode levar em conta uma reformulação dolayout por um projeto seu e usar a excelente arquitetura na organização do Artisteer paraposteriormente reformular o seu site.Outra coisa legal é que o layout desenvolvido pelo Artisteer é completamente padronizado eaceito pela W3C o que torna o seu site um sucesso para plataformas web e lhe retornamelhores resultados em SEO.
  54. 54. André Rossiter webrossiter@gmail.comFundoComo as demais categorias do Artisteer você pode nesta aba selecionar a opção sugerir fundoe ver se algum lhe agrada ou navegar entra as opções padrões e manipular individualmente deacordo com o intuito do seu projeto.A opção preenchimento você escolhe a cor de fundo para o seu site. Você também podeescolher planos de fundo diretamente de seus arquivos na opção do arquivo.
  55. 55. André Rossiter webrossiter@gmail.comFolhaComo todas as demais categorias, você tem uma opção de pedir sugestão de folha e ver osmodelos 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 dosite, escolher aplicar ou não aplicar bordas, transparências, preenchimento, margensinferiores e superiores.
  56. 56. André Rossiter webrossiter@gmail.comCabeçalhoComo 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 paramodificação do topo do layout, ou efeitos de fundo para imagens bem profissionais e layoutsinstitucionais.Você define inserir o texto do título superior ou não, pode além de escolher imagens do bancode dados do programa escolher imagens para interagir com o seu layout direto do seu PC.
  57. 57. André Rossiter webrossiter@gmail.comMenuNesta 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 estasopções e ícones para menus do seu site.
  58. 58. André Rossiter webrossiter@gmail.comArtigosNesta aba como todas as demais você possui uma opção de sugestão de menus.O mais interessante do Artisteer é a facilidade e inteligência artificial no desenvolvimento desua interface, totalmente intuitivo.Como você pode observar nesta opção (Artigos) você pode escolher a forma que desejapersonalizar os seus artigos.
  59. 59. André Rossiter webrossiter@gmail.comBarra LateralNesta aba como todas as demais você possui uma opção de sugestão de menus.Aqui você pode personalizar o tamanho da barra lateral, escolher a disposição destas barraslaterais, 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.
  60. 60. André Rossiter webrossiter@gmail.comMenu verticalNesta aba como todas as demais você possui uma opção de sugestão de menus.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 formamais avançada individualmente nesta aba (menu vertical).
  61. 61. André Rossiter webrossiter@gmail.comBotõesNesta aba como todas as demais você possui uma opção de sugestão de menus.A essa altura você já percebeu como é intuitiva a interface, eu acho que parece muito com ado Word, sendo que as aplicações mais eficientes e capazes de lhe retornar mais dinheiro queo Word, em aplicações diferentes se é que é possível fazer esta equiparação.Manipule desta forma a aparência dos seus botões.DicaO layout padrão o botão é grande, caso deseje fazer um layout pro FACEBOOK, lembre dediminuir o tamanho do botão.
  62. 62. André Rossiter webrossiter@gmail.comRodapéNesta aba como todas as demais você possui uma opção de sugestão de menus.As opções de rodapé são bem simples, acredito que para melhorar a aparência seja melhoreditorar depois de instalado pelo próprio painel do Joomla, usando o HTML.DicaAs vezes você usa uma cor sólida no seu rodapé e este aparece de forma clara, isto ocorrequando está previamente aplicado uma transparência no rodapé, para ajustar esta ocorrênciavá na opção (transparência) em seguida escolha a opção sem transparência.
  63. 63. André Rossiter webrossiter@gmail.comLink de RodapéPara remover a opção link de rodapé na parte superior clique na opção exportar em seguidaclique 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).
  64. 64. André Rossiter webrossiter@gmail.comMarca D’aguaPara exibir ou remover marca d’agua.Esta ultima opção (Nota de Rodapé) permite que você remova o link do final dá pagina, euacho 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.
  65. 65. André Rossiter webrossiter@gmail.comExportando o seu projeto para publicar no sitePara exportar o seu projeto clique na aba superior no ícone da tela de pintura, símbolo doArtisteer, 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 Joomlaenquanto a opção Pasta tem de ser feita pelo FTP do fire FTP ou zipada (importante zipada nãopode ser extensão RAR)
  66. 66. André Rossiter webrossiter@gmail.com Como Instalar o Joomla noFACEBOOK
  67. 67. André Rossiter webrossiter@gmail.comComo criar uma Fan PageÉ importante que você crie uma Fan Page para poder instalar o Joomla no FACEBOOK, pois noperfil de usuário normal não é possível ser feito isso, nem na página de grupo, mais detalhesno curso sobre Redes Sociais.Passo 1Acesse qualquer página Fan Page no FACEBOOK, na parte inferior clique na opção criar página.
  68. 68. André Rossiter webrossiter@gmail.comPasso 2Escolha 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.
  69. 69. André Rossiter webrossiter@gmail.comPasso 3Você 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.
  70. 70. André Rossiter webrossiter@gmail.comPasso 4Insira uma imagem no seu perfil de FAN PAGE.As pessoas não gostam de interagir com canais no FACEBOOK sem imagem.Momento 1Momento 2
  71. 71. André Rossiter webrossiter@gmail.comMomento 3Sua página agora está com sua foto.
  72. 72. André Rossiter webrossiter@gmail.comComo Instalar o Joomla no FACEBOOKInstale a APP do IFRAME Apps.Link de acesso http://www.facebook.com/iframe.appsPasso 1 clique em (Like – gostei) depois clique em ir para aplicativo.Passo 2Clique na opção (allow – permitir).
  73. 73. André Rossiter webrossiter@gmail.comPasso 3Copie e cole a URL (localizador de recursos uniformes) do seu site, ou seja, o endereço do seusite com o protocolo de comunicação completo.Ex.http://www.enderecomeusite.comCaso você possua mais de uma FAN PAGE no FACEBOOK, pode ocorrer de ser direcionado auma nova página para escolher a FAN PAGE a ser instalada o IFRAME APPS.Escolha a FAN PAGE desejada e clique em adicionar app.IMPORTANTEAs 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.
  74. 74. André Rossiter webrossiter@gmail.comEditorando a APPSEntre 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.
  75. 75. André Rossiter webrossiter@gmail.comAgora na opção aplicativos.Observe, instale e editore os aplicativos instalados no seu FACEBOOK.A opção IFRAME APPSClique 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.
  76. 76. André Rossiter webrossiter@gmail.comObserve o resultado final da FAN PAGE do Professor.André RossiterLink de acesso a Fan Page do professor: http://www.facebook.com/tutorbrasil
  77. 77. André Rossiter webrossiter@gmail.comGerenciando perfil preferencialPasso 1Entre na URL de sua FAN PAGE.Ex. http://www.facebook.com/minha_fan_pageClique na opção Editar página.Passo 2Você 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).
  78. 78. André Rossiter webrossiter@gmail.comPasso 3Clique 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.

×