Ronildo Costa - Joomla - CSS - Tecnologia - Profissional de Joomla

Bom, este é o meu primeiro post de otimização do Joomla, espero escrever uma série deles!

O primeiro caso que vamos tratar é o mais corriqueiro. Nós desenvolvedores que fazemos vários sites Joomla, as vezes não precisamos de vários recursos que já vem por padrão.
Um deles, e que é um dos maiores, é a biblioteca mootools que vem junto no sistema, na verdade o Joomla não quer saber se você vai usar a biblioteca ou não, ele simplesmente adiciona.

O problema 

Pois bem, o arquivo mootools.js tem aproximadamente 70k, se você tiver um site com 1000 visitas por dia, terá um uso de 70MB só desse arquivo. É muito?? É pouco?? Não sei, é seu projeto que vai dizer.
Levando em consideração que um dos fatores que o google passará a analisar daqui pra frente é o peso das páginas, isso pode nos ajudar no rankeamento do nosso site.

Agora vamos aprender uma forma simples de resolver esse problema.

A solução 

Como escreverei uma série de coisas para Joomla, vou começar explicando algumas metodologias próprias que auxiliam na organização do nosso código.

Primeira coisa a se fazer.

Crie um arquivo chamado, vars.php (vou usar bastante esse arquivo).
Dentro do index.php do seu template, abaixo da chamada de verificação de acesso ao arquivo (defined('_JEXEC') or die('Restricted access');) coloque o seguinte código "include_once (dirname(__FILE__).DS.'/vars.php');" - Esse código vai incluir o arquivo que você criou dentro do seu template.

Agora vamos começar a mexer no arquivo vars.php
Esse é o código que vamos usar para remover o arquivo mootools.js e também vamos remover o arquivo caption.js que normalmente não é usado (mais abaixo explico quando esses são necessários).

<?php
$headerstuff = $this->getHeadData(); // pega os dados do cabeçalho
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/mootools.js']); // remove mootools 1.11
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/caption.js']); // remove caption
$this->setHeadData($headerstuff); // carrega as modificações efetuadas
?>

Esse código foi uma adaptação do post do blog do Mamura.

Legal, quando carregarmos o nosso site já não teremos mais dois javascript que só fazem peso aos nossos sites.

Explicações 

Ops!!! Pera ae pessoal, não é bem assim, esses arquivos não são carregados a toa, eles servem pra alguma coisa, vou explicar em quais casos usamos esses arquivos.

Sabe aquelas janelas (window modal), que o site escurece e o conteúdo é carregado, pois é... aquilo normalmente é feito utilizando mootools, pelo menos o joomla oferece o um suporte nativo para fazermos aquelas janelas, mas não é em todos os sites que usamos isso, então fiquem atentos para isso.

Por quê o arquivo caption.js é carregado?
Quando estamos fazendo edição de conteúdo pelo frontend esse arquivo é necessário, pois ele cria alguns tooltips. Mas como não é sempre que usamos a edição pelo frontend cabe a você decidir se vai usar isso ou não.

Bom, eu vou usar os dois arquivos, então nem preciso fazer nada do que foi explicado até agora, correto?Errado!
Sempre faça isso que expliquei até agora, em todos os seus projetos. Ah é? e por quê devo fazer isso?

Por que o javascript deve ser um dos últimos elementos do html a ser carregado, então a forma como o Joomla está carregando isso é teóricamente errada.
Se por acaso você precisar usar esses arquivos, coloque-os antes do fechamento da tag body, ou seja la no final do seu template, da seguinte forma.

<script src="/media/system/js/mootools.js"></script>
<script src="/media/system/js/caption.js"></script>

É isso, pessoal espero que a dica ajude o máximo de desenvolvedores possíveis.

Considerações

O que vimos nesse post, nos mostra dois pontos de otimização

1. Menos arquivos para serem carregados no Joomla.
2. Carregando arquivos da forma correta (isso se aplica pra qualquer javascript na página), exceto aos que realmente necessitam serem carregados entre as tags head. 

Por favor, se encontrarem alguma coisa errada ou algo a acrescentar utilizem os comentários e eu faço a modificação no post.

Uptdate 1

O @daniel e o @cezarvelazquez perguntaram por que o javascript tem que ficar ao final do código.

A explicação para colocar o javascript por último é o seguinte:
Quando o browser está fazendo o download do javascript ele não faz nenhum outro download em paralelo, então o correto é colocar o javascript no final da página para que a mesma seja carregada mais rápido.

Aprender a criar um template personalizado no Joomla! é um conhecimento essencial para o profissional web que deseja abrir novas oportunidades de trabalho e também uma necessidade de muita gente. Muitas pessoas aprendem a criar o template de forma auto-didata, porém correm o risco de cometerem erros comuns e ou básicos. Este curso é promovido pela Konfide (empresa parceira do Joomla!Day e especializada Joomla! e SEO) e é ministrado por Ronildo Costa, membro ativo da comunidade Joomla! e organizador do Joomla!Day tem como objetivo ensinar o aluno a criar seu próprio template e dar dicas sobre os principais macetes para desenvolver uma bela estrutura em CSS.

Esta é a oportunidade de você entender exatamente como funciona a estrutura de diretórios do Joomla! e como manusear cada uma das pastas. Você terá embasamento suficiente para desenvolver layouts próprios sem precisar utilizar templates prontos. Aprenderá a criar novas posições em qualquer parte de um site. A Konfide é uma das poucas empresas que realiza cursos presenciais e tem marca forte no mundo Joomla!

Em dois dias (16h de treinamento) você terá a oportunidade de ver:

1. Conceituação de templates

- O que pode e o que não pode ser feito

2. Como o Joomla! trabalha com templates

- Estrutura e localização dos arquivos
- Template de site e administrativa

3. Conhecendo e trabalhando com os templates padrão

- Customização e edição

4. Criação de um template

- Definindo áreas de conteúdo
- Criação do xhtml + css
- Inserindo módulos e componentes

5. Criando o instalador

- Arquivo templateDetails.xml

Pré-requisitos
Para participar é importante que você tenha conhecimento de alguns itens:

- Conhecimento Intermediário em HTML e CSS
- Conhecimento em alguma ferramenta de edição de imagens (PhotoShop, Fireworks, Gimp, etc)

**Não é necessário conhecimento de PHP

Público-Alvo
WebDesigners e desenvolvedores web que pretendem agregar o desenvolvimento de templates a sua grade de serviços.

Mais informações nesse link: http://www.konfide.com.br/marketing-digital/Curso-Templates-Joomla-27-Fevereiro-2010.html

O instrutor do curso sou eu mesmo!!! :)

Bom, vamos ver se o pessoal gosta desse belo site em Joomla.

Com uma bela tipologia, e cores combinando muito bem Studio Pretov ganhou minha atenção. No mais sem muita novidade, código bem escrito, URL amigáveis, tudo que um belo site precisa ter.

link: http://www.studiopetrov.com

Bom essa é segunda entrevista do Blog (a primeira foi com o Júlio Pontes). Hoje falaremos com Rodrigo Spillere, Rodrigo é um dos maiores desenvolvedores atuais para Joomla, com a aposentadoria do Bigodines do mundo Joomla, Rodrigo é praticamente o melhor free lancer para desenvolvimento Joomla.

Caso você tenha interesse em ser entrevistado me mande um e-mail(ronildo @ joomla . com .br), e vamos nos falar.

Espero que gostem da entrevista, por que em breve virá mais.

1 - Fale um pouco de você, se apresente:

Me chamo Rodrigo Smania Spillere, sou bacharel em Ciência da Computação pela Universidade do Extremo Sul Catarinense (UNESC).
Tenho 23 anos e sou programador auto-didata, programo em diversas linguagens, mas meu foco atualmente está para o PHP.
Sou criador da ferramenta JoomGen. O JoomGen é uma ferramenta de MDA(Arquitetura orientada por modelos) no qual tem por seu objetivo principal gerar componentes para o framework Joomla! baseado em sua modelagem UML.
Sou desenvolvedor de "BackEnd" para Joomla! Trabalho com diversos projetos utilizando o framework Joomla! entre eles destaco a Porsche do Brasil(pela extrabold), Museu do futebol(pela konfide) e PICnet(Empresa de Ryan Ozimek, membro da diretoria da OSM).

2 - Há quanto tempo você trabalha com Joomla?

De brincadeira, desde 2006 desenvolvendo alguns sites com Mambo Open Source, mas comecei minha carreira profissionalmente como programador Joomla! em 2008 quando entrei para Extrabold Sports, sucedendo meu amigo Matheus Mendes(Bigodines) que para a infelicidade da comunidade não está mais trabalhando diretamente com Joomla!

3 - Quais são seus planos futuros para Joomla, ou até para sua carreira?

Minha carreira talvez por um golpe de sorte, está alavancando cada dia mais. Ontem eu estava aprendendo Joomla! e hoje programo para a empresa de um dos diretores da The Open Source Metters Foundation. Apresentei minha ferramenta no maior fórum de software livre da américa latina e fundei minha empresa de consultoria(JetWorks). Meus planos futuros é continuar com a empresa e fazer com que ela gere muitos frutos. Pretendo, assim que tudo se estabilizar contribuir mais diretamente com o "Core Team"(Equipe de desenvolvimento oficial) do Joomla!. Mas em curto prazo espero evangelizar o maior número de empresas para aderirem o CMS Joomla! como case.

4 - Qual a dica que você dá para quem está começando?

Estudem e estudem muito! Toda a informação que precisamos está na internet, basta nos dedicar e estudar o que realmente nos faz sentir tesão. Eu sou apaixonado por programação e sou fascinado pelo framework Joomla! acho que a grande chave do sucesso é fazer de seu hobby o seu ganha pão, você sempre faz melhor o que gosta de fazer.
Se você está começando, procure os canais certos de informação, visite o site joomla.com.br e acesse o forum oficial http://forum.joomla.org (Para quem não entende o inglês existe a seção "International Zone" procure por "Portuguese Forum") e nem preciso falar do blog do ronildo, pois vocês já estão lendo ele :-).

5 - Como você vê o mercado de trabalho para quem trabalha com Joomla?

O mercado de trabalho está amadurecendo muito, a algum tempo atrás empresas privadas e governamentais tinham um certo receio para implantar ferramentas livres e de código aberto. O mercado era muito preconceituoso justamente por questões comerciais das grandes empresas de software proprietário. Hoje a realidade está muito diferente, começando pelo governo federal, pois quase em sua totalidade o governo utiliza software livre, tanto para sites, intranets e até mesmo nos computadores dos servidores, a partir disso, surgiu o incentivo e o computador popular que permitiu a classe mais baixa adquirir seu próprio computador, este vem com Software Livre embarcado. Neste mesmo contexto surge o Open Source, que tira o domínio do programador com o Software que ele desenvolveu, ou seja, você não fica amarrado a um único desenvolvedor ou a uma empresa, pois o código é aberto e no caso do Joomla! existe uma imensa comunidade contribuindo para o seu sucesso.

A partir desses fatos as empresas estão percebendo todas as vantagens que um CMS livre proporciona e cada vez mais estão se convertendo a eles, abrindo assim grandes oportunidades de trabalho para desenvolvedores Joomla!

6 - Você sendo um programdor experiente de Joomla, qual a vantagem de Joomla com relação à outros CMS's?

Cada CMS tem suas vantagens e desvantagens, existe diversos CMSs no mercado alguns muito bons no caso do Plone e do  Rails. Outros nem tanto no caso do PHPNuke e Xoops(Minha Opinião). Mas a briga entre CMS's é como discutir qual é o melhor time de futebol ou qual é a melhor religião a seguir. A curva de aprendizado do Joomla! e o nível de seu framework em suas ultimas versões não deixam sombra de dúvida do porque Joomla! é o CMS que mais cresce no mercado. Eu destaco a grande vantagem do Joomla! em relação aos outros CMS's pelo fato de ser muito fácil de aprender e sair utilizando(O que em outro ponto de vista talvez não seja uma grande vantagem, mas em geral é). E pelo número crescente de usuários nos últimos meses.

7 - Você está satisfeito com os rumos tomado pelo projeto Joomla?

O Joomla está atingindo um belo nível de maturação. Se olharmos para trás nas versões 1.0.x e compararmos com as ultimas versões estáveis percebemos o quanto o framework evoluiu, em questões de padronizações, segurança, flexibilidade, etc...

O MVC também foi um grande passo e tudo isso foi feito em pouquíssimos anos, sinal de que está evoluindo muito rápido. Ainda tem muito trabalho a ser feito, mas SIM, eu estou muito satisfeito com rumos que o Joomla! está tomando.

8 - O que você espera da versão 1.6 do Joomla?

Existem muitas bibliotecas novas que foram adicionadas para facilitar a vida do programador. A documentação está muito boa, e o novo sistema de ACLs nem se fala.

As funcionalidades propostas já ultrapassaram minhas expectativas, só espero que esteja tudo funcionando e sem muitos bugs.

9 - Qual o melhor jeito que as pessoas podem encontrar para ajudar no projeto Joomla?

Pra mim o fórum é a base do conhecimento do Joomla! Se cada usuário responder ao menos uma dúvida no forum por mês, nossa comunidade evoluirá cada vez mais rápido. Quem é novo e já aprendeu alguma coisa tente resolver as dúvidas dos colegas, pois não importa se a pessoa que perguntou tem mais tempo ou conhecimento de Joomla! que você, você pode ir atras e resolver aquele detalhe que o outro passou e não viu, e outra, você aprenderá muito mais transmitindo o seu conhecimento do que somente perguntando e não contribuindo com nada.

Você que esta lendo faça o seguinte, abra o fórum e abra uma dúvida, instale o Joomla! e tente reproduzir o erro do seu colega, em seguida tente resolvê-lo, não é perda de tempo, com certeza você aprenderá muito.

10 - Espaço livre, comente o que você quiser aqui.

Gostaria de convidar o pessoal para estudar mais sobre o JoomGen e os benefícios que ele proporciona para os desenvolvedores. Gostaria de fazer uma chamada para que contribuíssem de alguma forma, não só com código, mas com testes, documentação, doações ao projeto, indicações de trabalhos, etc.

Boa sorte para todos que estão começando com o Joomla! e para os que já trabalham eu peço união, pois Open Source é assim a união faz a força.

Para quem interessar, meu blog é: www.spillere.info e meu twitter @rodrigospillere .

Obrigado Ronildo pelo convite, grande abraço.

Pessoal fiz umas atualizações no blog, coloquei os comentários de volta... agora com uma versão mais nova do !JoomlaComment. O layout dos comentários continua o mesmo, não testei em outros browsers (leia-se IE).

Outra modificação que fiz, essa bem mais drástica foi desabilitar o componente de SEF (ArtioJoomSEF), como expliquei pro @fititnt no twitter, quando fiz o blog o SEF nativo do Joomla era muito ruim, muito mesmo (versão 1.0), porém agora com a versão 1.5 tudo mudou e não vejo mais utilidade para utilizar o componente, que aliás já me trouxe muita dor de cabeça. Com essa mudança vários problemas ocorrerão como url's quebradas e por ai vai.
Peço que por favor se encontrar alguma URL que não está funcionando, me avise... ok?? Afinal comentário serve para isso.

Bom como as coisas andam meio paradas e eu ando com pouca criativivdade para escrever algo novo sobre Joomla, vou seguir os passos do Henrique Costa (revolucao.etc.br) e listas os 10 blogs que foram referências para mim em 2009. Isso ajuda à vocês também conhecerem um pouco mais de onde tiro minhas inspirações.

1. Pinceladas da Web (http://www.pinceladasdaweb.com.br/blog)
   O blog pinceladas na web é uma fonte de inspiração para várias coisas que faço, e já aparece bastante por aqui.
2. Jovem Nerd (http://www.jovemnerd.com.br)
   O jovem nerd principalmente pelo NerdCast, o que me faz muito rir.
3. Mac Magazine (http://www.macmagazine.com.br)
   Esse é um blog onde encontro bastante informação do mundo MAC, o qual eu comecei a fazer parte esse ano de 2009 e espero nunca mais sair desse mundo.
4. Web Resources (http://www.webresourcesdepot.com)
   Web Resources é um blog que eu não sei como descobri ele, porém no primeiro post que li já assinei o feed e desde então venho acompanhando-o.
5. Brian Teeman (http://brian.teeman.net)
   Brian Teeman, o único blog sobre Joomla que entrou na lista, o cara é super sarcástico e manda bem.
6. Capinaremos Blog (http://www.capinaremos.com)
   Blog de diversão, muito humor negro e piadas curtas.
7. Jacaré Bangela (http://www.jacarebanguela.com.br)
   Jacaré um dos maiores blogs de humor do Brasil, então acho que dispensa apresentação.
8. CSS Remix (http://www.cssremix.com)
   CSS Remix, é uma fonte para sempre estar acompanhando as tendências de Design que vem por ai.
9. Juca Kfouri (http://blogdojuca.blog.uol.com.br)
   Juca Kfouri, dispensa apresentação (viu nerd também gosta de esporte).
10. Tiago Dória (http://www.tiagodoria.ig.com.br)
    Tiago Dória, é um jornalista e fala muito bem sobre o mundo de tecnologia, gosto muito do trabalho dele.

Espero não ter feito nenhuma injustiça.
E você, quais são seus blogs preferidos?? Putz esqueci que o blog tá sem comentários... hehehe - essa semana eu vou colocar de volta os comentários, e a boa notícia é que vou continuar com o mesmo componente (JoomlaComments), apenas vou fazer um tema novo para ele, ai coloco de volta.

Ta bom vai, sim é uma auto-promoção também.

Fazia muito tempo que não postava um belo site Joomla, sei lá talvez esse não tenho um design lindo, mas o trabalho que deu pra deixar esse site rodando do jeito que ele está, ele merece muito mais do que o título de Belo Site.

A versão anterior era em Mambo, e precisou ser feita toda a migração de conteúdo antigo, o que deu um belo trabalho, já que o script de migração das versões de Joomla não previa o uso de imagens pelo antigo mambot (mosimage).

O site foi realizado em parceria com a Inspira (gostei basatnte de trabalhar com o pessoal de lá, apesar de serem do lado negro da força.. hehehe).

Link: http://www.arede.inf.br

Pensaram que eu tinha desistido do blog?? Não não, vão ter que me aturar por mais um tempo ainda.

Bom pra começar o blog está de cara nova (nem precisava falar né??), ainda não está completo falta muita coisa, algumas coisas do blog antigo não sei se vou colocar... como os comentários, vou analisar se continuo com o Joomla Comment ou se parto para o DisqUS.

O menu superior será o próximo ponto que vou tratar no site, então não se desesperem se não conseguirem entrar em contato, logo logo coloco o menu de volta (para quem quiser pode escrever diretamente no meu e-mail ronildo @ joomla . com . br).

O novo design é assinado pelo Renato Vieira (brigadão cara)... o cara manda muito bem, espero que gostem.

Quanto ao IE, o blog no começo terá alguns pequenos problemas já que estou tentando aprender HTML5 (sim se olhar o código fonte verá muita coisa de HTML5). Então por favor usem a raposa ou o Chrome. Mas prometo que arrumarei o site para o IE (eu quero dizer o IE não o lixo do IE6).

Como referência de HTML5 usei muito o site Pinceladas da Web (valeu Pedro por compartilhar os seus conhecimentos), vi o código fonte do site pelo menos umas 100 vezes... faz parte.

Bom com um pouquinho de atraso, vou falar do Joomla Day Brasil 2009.

No meu ponto de vista o evento foi muito bom, claro que não foi perfeito e imprevistos aconteceram, mas no geral o saldo foi muito positivo.
O local escolhido não poderia ter sido melhor, no pé do bondinho no Rio todos ficaram encantados com a localização. Eu só acho que o espaço que foi cedido poderia ter sido trabalhado um pouco melhor, e o que dificultou para que acontecesse isso foi a minha estadia nos EUA, como não conhecia o local ficou díficil imaginar como seria os locais disponíveis.

As Palestras, isso eu acho que foi o ponto forte e o ponto fraco, vamos analisar. Quando estávamos discutindo quais seriam as palestras do Joomla Day, chegamos num consenso, o evento deveria tentar agradar ao máximo todos os públicos, desde empresários do ramo até o pessoal que trabalha no dia a dia com a ferramenta, e para isso separamos da seguinte forma, palestra para um nível mais empresarial (Márcio Okabe), Comunidade (Ryan Cozimek), Desenvolvedor (Rene Muniz, as oficinas comigo e com o Daniel, e a palestra do Júlio Pontes com o Daniel Leandro) e um tema mais abrangente (Fernando Soares).
Como viram acima, demos um pouco mais de enfase para a comunidade de desenvolvedores, por que penso que o JoomlaDay é feito para a comunidade, claro sem deixar de lado todas as outras partes.
Não sei se foi impressão minha, mas vi algumas pessoas um pouco chateadas com as palestras e com o desenrolar do evento, fica díficil agradar a todas, mas posso dizer que pelo menos tentamos, isso foi a explicação do por que eu achei ponto fraco também.

Aqui estão os link das fotos no flickr (se você tiver mais fotos por favor me avise via comentários):
http://www.flickr.com/search/show/?q=jdbr09 (slideshow)
http://www.flickr.com/search/?q=jdbr09 (sem slideshow)

Aqui algumas coisas que encontrei no google sobre o evento (quem souber de mais links por favor me avise para que possa atualizar o post):
http://blog.konfide.com.br/2009/09/12/joomla-day-brasil-2009-no-rio-de-janeiro-um-sucesso/

Por favor, gostaria de ouvir comentários do evento para que possamos melhorar.

Alex Novelli, é um designer como poucos. Trabalhamos juntos em duas empresas a primeira a Basics quando cheguei ele já estava lá na Sciere eu indiquei ele para o pessoal que gostou do trabalho dele e o contratou.

Essa semana ele lançou a nova versão do seu portfólio. Como ele está sem empresa no momento pediu uma força na divulgação do seu trabalho. Já fizemos vários trabalhos juntos podem ver no meu portfólio e no portfólio dele também.

Fica ai a dica pra empresas que procuram designers.