Desenvolvimento Web

jMenu: Menu De Navegação Com Subníveis

Existem sites que possuem muitas seções e subseções e apresentam bastantes recursos a seus visitantes. Quando é o caso de haver um menu grande e este possuir muitos níveis, torna-se primordial que a apresentação deste menu seja feita de forma adequada, não deixando pecar pela navegação facilitada e usabilidade.

Um menu com subníveis, para este casos, é a melhor opção. Existem diversas técnicas para fazer um menu multi nível e, hoje, apresentaremos a técnica de fazer este menu utilizando o incrível plugin para jQuery jMenu!

O jMenu é um plugin para jQuery que permite criar um menu horizontal com infinitos níveis e sub-níveis de profundidade. Como é preciso o jQuery UI para seu funcionamento, também é possível aplicar efeitos deste, como fadeIn ou slideDown. Sua implementação é bastante simples, não precisando mais que algumas listas HTML aninhadas e poucas linhas de código.

Usando jMenu

Primeiramente, faça o download do jMenu. No arquivo zipado, você encontrará 2 arquivos com imagens de setinhas para o menu, além dos javascripts necessários. No <head> de seu documento, faça a chamada a todos esses arquivos.

Para o uso do jMenu, basicamente o que se precisa é de uma div e algumas listas com HTML, mais ou menos como a seguinte estrutura:


<ul id="jMenu">
  <li><a class="fNiv">Nível 1</a> <!-- Classe "fNiv" obrigatória no primeiro nível -->
    <ul>
      <li class="arrow"></li> <!-- Setinha para indicar mais níveis -->
      <li><a>Nível 2</a></li>  
      <li><a>Nível 2</a></li>  
      <li><a>Nível 2</a>  
        <ul>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
        </ul>  
      </li>  
      <li><a>Nível 2</a></li>  
    </ul>  
  </li>  
</ul>

Então, basta inicializar o plugin:


<ul>
$(document).ready(function(){
  $("#jMenu").jMenu();
});
</ul>

Opções do jMenu

O jMenu possui algumas opções para controle de posicionamento/comportamento:

  • ulWidth. Fix na largura dos sub-menus (padrão ‘auto’).
  • absoluteTop. Posição absoluta de “top” do primeiro subnível do menu comparado a seu antecessor (padrão ’30’).
  • absoluteLeft. Posição absoluta de “left” do primeiro subnível do menu comparado a seu antecessor (padrão ‘0’).
  • effectSpeedOpen. Velocidade (em ms) do efeito de slideDown/fadeIn dos submenus (padrão ‘350’).
  • effectSpeedClose. Velocidade (em ms) do efeito de slideUp/fadeOut dos submenus (padrão ‘350’).
  • effectTypeOpen. Efeito de abrir o submenu, que pode ser “slide”, “fade” ou “” (padrão ‘slide’).
  • effectTypeClose. Efeito de fechar o submenu, que pode ser “slide”, “fade” ou “” (padrão ‘slide’).
  • effectOpen. Qualquer efeito do jQuery UI (padrão ‘linear’).
  • effectClose. Qualquer efeito do jQuery UI (padrão ‘linear’).
  • TimeBeforeOpening. Tempo (em ms) antes de os submenus fecharem (padrão ‘200’).
  • TimeBeforeClosing. Tempo (em ms) antes de os submenus fecharem (padrão ‘200’).
  • animatedText. Se “true”, faz animação no hover dos itens (padrão ‘false’).
  • paddingLeft. Animação de padding-left quando a opção animatedText é ‘true’ (padrão ‘7’).

Veja o exemplo oficial do jMenu.

Conclusões sobre o jMenu

Menus com subníveis são interessantes e úteis. Quando é o caso de ter muitas opções disponíveis, certamente seu uso é uma das melhores opções disponíveis atualmente.

É ainda melhor quando sua implementação é tão simples, e isso pode ser conseguido utilizando o jMenu. Vale a pena!

38 Ideias Espetaculares Para Sites De Empresas

Uma empresa, que pretende competir numa sociedade que se confunde cada dia mais com uma rede social digital, não pode sequer sobreviver sem um site e uma presença ativa nessa rede social, seja no Twitter, no Facebook ou no LinkedIn, exemplos apenas dos lugares onde partilhamos informação e experiências sobre produtos, serviços e marcas.

O design é um elemento essencial da comunicação de qualquer empresa, não só pela imagem profissional que pode transmitir, como por todos os valores que podem estar associados a essa imagem. No caso do site da empresa, é fundamental que haja consistência entre o design offline e online e que a forma esteja sempre ao serviço do conteúdo.

O site não é um fim em si mesmo. É uma ferramenta que precisa de ser afinada para maximizar os respectivos objetivos. E tem que ser testada para otimizar a taxa de conversão dos caminhos para apresentamos aos visitantes para contactarem a empresa ou efectuarem uma compra.

Nos exemplos que apresentamos, observem o layout, o menu, a usabilidade, a combinação de cores e os gráficos usados.

Espero que encontrem inspiração para criarem o site da vossa empresa nas 38 ideias fantásticas que apresentamos a seguir:

ten 24 media

2udoku

AgileZen

Apple

BlackBerry

Carrefour

citi

crazyegg

DELL

TRUMP

eWedding

firehost

serj

GE

GlobalLogic

glue

HITACHI

LemonStand

mailer

MISSION BICYCLE

newsgator

NYBBLETECH

RBS

teamEXCELLENCE

ThyssenKrupp

UBS

Harley-Davidson

WOT

31three

mint

EA

EPSON

MailChimp

ExxonMobil

SATURIZED

Checkout

Chapeltown

Miro 3.5

Legendas Elegantes Nas Imagens Com jQuery Captify

Legendas elegantes em imagens jQuery Captify: exemplo

Atualmente, existem milhões e milhões de web sites, mas um bom site é assim considerado por seu detalhes. Quantos sites semelhantes (e até idênticos) não existem na web, que se propõem a fazer a mesma coisa e tem o mesmo escopo? Como saber qual desses é bom e qual deles passa a sensação de que “algo está faltando”? Através dos detalhes.

E, além de uma boa apresentação de imagens ser um “detalhe” muito importante, se o site tiver um bom sistema de exibição de captions para estas imagens, isso também conta. A boa notícia é que isso pode ser feito facilmente através do plugin jQuery Captify.

jQuery Captify é um script de 2.3KB que provê captions (o texto que está no atributo “alt” da imagem) bonitos e elegantes “sob demanda”, quando acontece o evento “mousehover” nas imagens-alvo. Certamente um efeito interessante e chamativo, que causa surpresa agradável aos visitantes.

Usando jQuery Captify

Como é de se esperar, para colocar em produção você deve  fazer download do Captify e fazer as chamadas apropriadas no head de seu documento web (respeitando a estrutura de diretórios de seu projeto, obviamente):


<script src="jquery-1.4.min.js" type="text/javascript" language="javascript"></script>
<script src="captify.js" type="text/javascript" language="javascript"></script>

No próprio arquivo compactado do plugin, vem um arquivo CSS de exemplo (que você deve inserir no head, também). Apesar de ser bonito e chamativo, ele é genérico e talvez você precise alterar uma ou duas coisas para que o efeito se adeque perfeitamente a seu projeto.

Como sugerido pelo próprio autor do plugin, todas as imagens que tiverem a classe “captify” serão contempladas pelo efeito de legenda. Então, para ativar o plugin com suas configurações padrão, basta fazer o seguinte:

$('img.captify').captify();

Para ver alguns exemplos, acesso o site oficial do jQuery Captify.

Opções do jQuery Captify


$('img.captify').captify({
  // velocidade do efeito de mousehover
  speedOver: 'fast',
  // velocidade do efeito de mouseout
  speedOut: 'normal',
  // delay para o caption sumir depois do mouseout (ms)
  hideDelay: 500,  
  // 'fade', 'slide', 'always-on'
  animation: 'slide',    
  // texto/html a ser colocado no início de cada legenda
  prefix: '',    
  // opacidade do caption
  opacity: '0.7',          
  // nome da classe CSS para o box do caption
  className: 'caption-bottom',  
  // posição do caption ('top' ou 'bottom')
  position: 'bottom',
  // % de largura do span da legenda da imagem
  spanWidth: '100%'
});

Conclusão sobre jQuery Captify

Como citado no artigo, os detalhes fazem a diferença em um site. Caso você queira ter um site considerado excelente, faça o básico e, depois, foque sua atenção aos detalhes.

Certamente fazendo efeitos agradáveis, recursos inovadores e controles de personalização, você estará trilhando um bom caminho; e o mesmo se aplica a usar o jQuery Captify: use legendas sob demanda nas imagens e surpreenda positivamente os visitantes!

fontResizer – Controlar Tamanho Da Fonte Com jQuery

fontResizer: aumentar e diminuir textos no site (representação)

Já aconteceu se você entrar em algum site e achar o tamanho dos texto pequeno de mais? Já entrou numa página da internet e percebeu que está com certa dificuldade de leitura e não enxerga muito bem as letras? Se não aconteceu com você, fique sabendo que acontece, diariamente, com centenas de milhares de pessoas.

Algo simples pode se feito para sanar este problema e aumentar a usabilidade e acessibilidade de seus sites: controle de tamanho de fontes! Basta um simples controlador para o tamanho das letras e pronto: caso alguém se sinta desconfortável ou, mesmo, não consiga visualizar corretamente os conteúdos em função do tamanho diminuto da fonte, basta usar o controlador para aumentar. O contrário também: se julgar que está tudo muito grande e/ou ocupando espaço demais, basta acessar a ferramenta de controle de tamanho de fonte e usar a função “diminuir”.

Mas, como aumentar o tamanho do texto do site automaticamente? Simples, usando o fabuloso plugin para jQuery fontResizer!

O fontResizer aumenta ou diminui o tamanho dos textos de elementos específicos do site e ainda grava um cookie para, quando o visitante retornar ao site, este já apresentar as configurações escolhidas por ele previamente.

Usando fontResizer

A primeira coisa a se fazer depois de baixar o script do fontResizer, é inserir no <head> do seu documento o jQuery e o próprio fontResizer (obviamente, alterando os caminhos para ficarem de acordo ao que você está usando em seu projeto):


<script src="jquery-1.4.min.js" type="text/javascript" language="javascript"></script> 
<script src="jquery.fontResizer-2.0.js" type="text/javascript" language="javascript"></script>

Com o plugin para aumentar / diminuir o tamanho dos textos, as mudanças podem ser incrementais ou com valores pré-determinados.

Para mudanças incrementais:

  • Qualquer elemento com a classe “increaseClickItem” aumenta o tamanho da fonte.
  • Qualquer elemento com a classe “decreaseClickItem” diminui o tamanho da fonte.
  • O valor de incremento padrão é de 2.

Quando os valores das propriedades “minFont” e “maxFont” são selecionados, a classe “disabled” é automaticamente aplicada ao item oposto (se selecionar para aumentar, a classe se aplica ao que diminui e vice-versa). O mesmo vale se o cookie fontResizer retorna um valor que corresponda a minFont ou maxFont.

Para mudanças de tamanhos específicos, aplica-se o seguinte:

  • Qualquer elemento com a classe “setFontSize” especifica o tamanho da fonte.
  • O tamanho é determinado através do atributo “title”, que precisa ser passado quando a classe é setada.
  • Exemplo: <a title=”20″> vai colocar o tamanho da fonte em 20.

Quando um elemento com a classe “SetFontSize” é clicado, a classe “on” é passada para ele. Quando um outro elemento com a classe “SetFontSize” é clicado, a classe é removida do anterior e passa para esse. Isso também ocorre com elementos de classe “increaseClickItem”  e “decreaseClickItem”, quando estes chegam a um valor que corresponde a um valor de elementos com “SetFontSize”. O mesmo é verdade se o cookie fontResizer retorna um valor que corresponde a um valor “SetFontSize”.

O uso do fontResizer consiste em chamar a função de inicialização e passar as opções que se deseja (apresentadas a seguir). Por exemplo, fazer com que o controle de tamanho de textos funcione nos parágrados da div com ID “content” e elementos com classe “resizeMe”:


jQuery(document).ready(function($){
    $('#content p, .resizeMe').fontResizer(
  {
      minFont:10,
      maxFont:20,
      increment:1
        }
    );
});

Opções do fontResizer

Os valores default do plugin são:

  • sizeType. ‘px’
  • minFont. 12
  • maxFont. 16
  • fontSet. 14
  • setFontOn. ‘on’
  • increment. 2
  • incrementDisable. disabled’

Valores default do cookie:

  • cookieName. ‘fontResizer’
  • cookieExpire. cExpireDate

cExpireDate é o dia/mês em que o cookie é criado (1 ano para expirar). Variáveis usadas pelo cExpireDate” (sobreescritas quando o cookie expira ou quando um novo é criado):

  • var date = new Date()
  • var currYear = date.getFullYear()
  • var currMonth = date.getMonth()
  • var currDay = date.getDate()
  • var cExpire = new Date(currYear + 1, currMonth, currDay)
  • var cExpireDate = cExpire.toUTCString()
  • cookiePath: ‘/’

Conclusão sobre o fontResizer

Certamente quando um site possui um controle de tamanho dos textos, sua usabilidade e acessibilidade aumentam. Aumentando a usabilidade, a qualidade do site, como um todo, também aumenta. Portanto, ter esta opção é algo muitas vezes indispensável e, quando isso é possível com tamanha simplicidade e eficiência quanto permite o fontResizer, melhor ainda!

Protega O Email Publicado No Seu Site Dos Spammers

Como proteger e-mails de SPAM em sites

Todos que mexem com internet, desenvolvedores e não desenvolvedores, sabem que um dos maiores inconvenientes que a rede nos oferece é chamado SPAM. E-mail não desejados com promoções e ofertas de produtos que prometem revolucionar nossas vidas com descontos incríveis e aumento de nossas performances físicas são tão comuns quanto os próprios e-mails.

E umas das maneiras para que esses e-mails cheguem até você é através da disponibilização de seu endereço de e-mail em sites. Sejam sites públicos, privados, cadastros ou o que quer que seja, caso seu e-mail esteja disponível no site sem a devida “proteção”, há grandes chances de ele também ser incluído em uma lista de spammers para que a propaganda pílula azul chegue até você.

Existem diversas maneiras de se colocar e-mails em sites de maneira a não permitir que sejam automaticamente rastreados por bots de spammers, mas duas delas são especialmente eficientes e simples de serem executadas.

Email Spam Protection jQuery Plugin

Para quem gosta de bons plugins para jQuery, existe um plugin que se propõem a fazer essa parte de segurança para e-mails, trata-se do Email Spam Protection. Segundo consta na própria página oficial, basta, depois de fazer as chamadas corretas aos arquivos javascript, inserir o seguinte trecho:


$('body').emailSpamProtection('email');

Com isso, sempre que algo com a classe “email” for encontrado, haverá a substituição de ” [at] ” por “@”.


<span class="email">email [at] dominio.com.br</span> // Aparecerá como "email@dominio.com.br"

Uma solução simples e eficiente para o problema de SPAM.

Função PHP para proteger e-mails de SPAM

Para os membros da velha-guarda e interessados em programação old school, é possível fazermos uma função back-end simples em PHP para, dinamicamente, substituir todos os caracteres do e-mail (incluindo “@” e “.”) por seus respectivos códigos ASCII através da função ord(). A finalidade da função é fazer uma varredura em cada caracteres do e-mail para realizar a substituição (tendo em mente dicas para otimizar códigos PHP):


function encode_email($e)
{
  $email_len = strlen($e);
  for ($i = 0; $i < $email_len; $i++) { $output .= '&#'.ord($e[$i]).';'; }
  return $output;
}

Dessa maneira, o navegador vai renderizar normalmente o e-mail, pois interpreta código ASCII de forma transparente; entretanto, dando uma olhadinha no código-fonte da página, terá a grata surpresa de encontrar:


&#101;&#109;&#97;&#105;&#108;&#64;&#100;&#111;&#109;&#105;&#110;&#105;&#111;&#46;&#99;&#111;&#109;&#46;&#98;&#114;

E isso dificulta a varredura de bots dos spammers.

Conclusão(?)

A conclusão é que os spammers sempre aprimoram suas técnicas para poder disparar tais mensagens indesejáveis. Acredite se quiser, este é um “nicho de mercado” que gera muito dinheiro. Quem trabalha com desenvolvimento web sempre é mais atento com questões de segurança em web sites, mas os outros 99,9% da população, não. As pílulas azuis continuam sendo vendidas!

Certamente essas não são soluções definitivas, mas, por hora, certamente ajudam a controlar boa parte dos bots spammers. Devemos procurar soluções novas para técnicas de SPAM novas, e novas destas surgem a cada dia…

Como Criar Um Site Em Joomla Para A Sua Empresa – Super Manual – Parte 30

Olá Pessoal!

Esse artigo é a última parte desse super manual e espero que o seu site esteja a todo vapor divulgando sua empresa e maximizando seus lucros. E que tal dar um upgrade nele? Gostou da ideia? 😀

Então, para fechar com chave de ouro quero indicar 11 extensões que você poderá adicionar ao seu site empresarial e assim deixa-lo bem mais atrativo e funcional. Você também poderá pesquisar por suas próprias no site oficial do Joomla.

E você quiser indicar alguma extensão interessante poderá utilizar os comentários sem problemas!

Não estarei dando muitas explicações sobre as que estarão apresentadas aqui, como suas configurações e modo de operação, mas você poderá procurar por outros artigos onde elas serão bem mais detalhadas. Nessa parte você apenas irá conhecer as extensões! 😀

Mas agora chega de papo e vamos conhecê-las?

K2

Site Oficial

Repositório do Joomla

Download

Demonstração

Não se engane por causa do nome desse componente que tem apenas dois caracteres, pois ele é realmente poderoso!

O K2 nos possibilita criar uma solução bem rica e completa na apresentação dos itens de conteúdo. Isso quer dizer que você poderá criar artigos com diversos campos adicionais, tais como imagens, vídeos, galerias e outros.

Ainda possibilita adicionar tags, subitens, comentários, implementar campos adicionais no formulário de cadastro, integração com o twitter, anexar documentos, personalizar o perfil de usuárioe e muito mais. Praticamente você terá um outro sistema dentro do Joomla.

O K2 possui muitos itens adicionais que são pagos, mas que realmente valem a pena. Faça uma pesquisa no site oficial e descubra todos os recursos presentes.

Para um site empresarial existem muitas possibilidades com esse componente, tais como site de revistas, catálogo de produtos, gestão de conhecimento, gerenciamento de download, listagem de eventos e muito mais.

Faça uma visita ao site de demonstração e veja as diversas possibilidades:

Community Builder:

Site Oficial

Repositório do Joomla

Download (é necessário cadastro)

Tradução para o Português

Demonstração

Através desse fantástico componente será possível criar formulários de cadastro com os campos personalizados possibilitando assim criar uma rede social, por exemplo, com níveis de acesso, conexão entre os usuários, moderação de perfis, upload de imagens e muito mais.

Permite ainda integração com outros componentes estendendo assim ainda mais suas funcionalidades. Podemos destacar a troca de mensagens, newsletter, fóruns, galerias, blog pessoal, doações, inscrição paga, loja virtual e muito mais.

Ainda existem diversos Add Ons específicos para o Community Builder, mas que são pagos. Pesquise e leia a respeito e tire suas próprias conclusões.

No site empresarial poderia ser utilizado como um controle de funcionários ou uma rede social da empresa. Visitando a página de demonstração você poderá ter uma pequena ideia do que estou falando:

Gerenciadores de Download

Esse tipo de componente é bem útil para um site, pois é permite organizar todos os arquivos que serão disponibilizados aos visitantes. É possível agrupar em categorias e subcategorias, conceder direitos de acesso de acordo com o nível do usuário, visualizar estatísticas do download, pesquisa personalizada e muitos mais.

Serão indicados três componentes dessa categoria e cada um possui alguns recursos diferentes ou adicionais. Faça uma pesquisa e analise bastante antes de usa-lo no seu site empresarial.

Remository

Site Oficial

Repositório do Joomla

 jDownloads

Site Oficial

Repositório do Joomla

 DOCman

Site Oficial

(componente pago)

joomlaXplorer

Site Oficial

Repositório do Joomla

Tradução Português

Download (listagem com todas as versões)

Componente que estende as funcionalidades de FTP do Joomla, permitindo assim apagar, copiar, renomear e descompactar arquivos e pastas do servidor de hospedagem.

QuickFAQ

Site Oficial

Download

Esse componente permite adicionar um FAQ (Frequently Asked Questions), que significa Perguntas Mais Frequentes ao seu site em Joomla.

É possível criar categorias, subcategorias, tags, votação, favoritos, upload e gerenciamento de documentos, criar PDF, ter Feed RSS, além de integração com componente de comentário (JComments e JomComments).

JComments


Site Oficial

Repositório do Joomla

Download

Demonstração

Adicione um poderoso e avançado sistema de comentários ao seu site empresarial, com tecnologia AJAX, com diversas configurações e ainda disponível em diversos idiomas, inclusive o português.

Dentre alguns recursos podemos citar a classificação de comentários por categorias, publicação automática para grupos de usuários do Joomla, possibilidade de editar os comentários no front-end, suporte a smiles, suporte a teclas de atalhos e muito mais.

Ela ainda permite edição de direitos dos usuários, proteção contra spam e fácil integração com os melhores componentes do Joomla.

No site empresarial os comentários são uma ótima forma de você manter um contato mais “pessoal” com seus clientes e por isso realmente pense na possibilidade de adicionar esse componente.

JEvents


Site Oficial

Repositório do Joomla

Download (incluindo outros módulos)

Demonstração

Componente para gerenciar eventos de qualquer natureza, com possiblidade de adicionar um calendário, pois ele permite a integração com diversos módulos e plug-ins.

Existe ainda uma versão paga adicionando assim ainda mais recursos, como novos layouts, localização pelo Google Maps, adição de campos extras e muito mais.

Xmap

Site Oficial

Repositório do Joomla

Download

Esse componente facilita ao máximo a geração de sitemaps do seu site empresarial, podendo assim ajudar em muito a divulgação da sua empresa/negócio.

Além de gerar o XML compatíveis com os principais indexadores do mercado, o Xmap ainda é compatível com diversos outros componentes, incluindo alguns já citados nesse artigo. Visite a página oficial e tire todas as suas dúvidas.

VirtueMart


Site Oficial

Repositório do Joomla

Download

Tradução (Componente e alguns módulos)

Demonstração

E para finalizar nossa pequena lista que tal esse componente que permite transformar seu site empresarial numa loja virtual bem completa. Você poderá criar um catálogo de produtos, configurar sistemas de pagamento, disponibilizar opções de entrega, gerenciar usuários e ordens de compras e muito mais.

Existe ainda a possibilidade de traduzir não somente o componente principal, mas alguns módulos também, facilitando assim a sua vida.

Faça uma visita à página de demonstração e já vá pensando na possibilidade de configurar a sua própria loja virtual:

Você ainda poderá diversos outros módulos visitando a página oficial de repositório do Joomla. São diversas categorias à sua escolha, com milhares de componentes te esperando!

Qualquer dúvida, sugestão, crítica ou elogio pode ser feito nos comentários.

Finalizando o Super Manual

E assim chegamos ao fim, não somente dessa parte mas desse super manual sobre como criar um site empresarial no Joomla.

Tenho certeza de que vocês gostaram e aproveitaram todos as dicas, tutoriais, informações e sugestões desse super manual.

Mas não fique triste com esse fim, pois ainda temos muitos outros artigos no Webmaster.pt. Aproveite, pesquise, aprenda e tenha a certeza de que você terá um site de sucesso. Estou torcendo por você!

Fiquem na paz e até o próximo encontro!

SmartScroll: Scrolls Mais Profissionais E Eficientes

SmartScroll logo

É sabido por todos do desenvolvimento web que existem certas “desavenças” entre programadores e designers. Os programadores querem sempre um código mais enxuto e um site mais objetivo; os designers preocupam-se principalmente com a aparência e visualização dos componentes das páginas. Um dos pontos que mais gera discussões é sobre os scrolls de um site.

A rolagem de tela é sempre padrão e acompanha o visual que já vem no navegador. É algo padrão e, geralmente, quando se quer alterar isso, recorre-se a componentes em flash ou java. Mas existe uma solução muito mais simples e fácil de se instalar, que vai fazer com que scrolls sejam bonitos e eficientes ao mesmo tempo, acabando de vez com essa parte dos conflitos entre designers e programadores: trata-se do SmartScroll.

Com o SmartScroll é possível dar estilos ao scroll de elementos na página, ao mesmo tempo em que uma espécie de sumário navegável é apresentado ao lado do elemento, possibilitando o acesso rápido a títulos que compõem o conteúdo da área de rolagem.

Usando SmartScroll

Depois de baixar o SmartScroll, a primeira coisa se fazer é colocar no <head> as chamadas para jQuery e o script do SmartScroll, em si:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.smartScroll.min"></script>

Lembrando que o caminho acompanha a estrutura de seu site e, sempre que possível, é bom usar a última versão do jQuery por, geralmente, ser mais rápida e eficiente em seus métodos e funções.

Caso queira se valer da Mouse Whell Extension, que permite o scroll pela rodinha do mouse, basta fazer a chamada, também.

Opções do SmartScroll

O uso do SmarScroll é, necessariamente, acompanhado por algumas de suas opções, que são:

  • prefix. Adiciona um prefixo denome de classe para cada elemento criado (string).
  • width. Largura da scrollbar (int).
  • height. Altura da scrollbar (int).
  • mode. Nesta versão do plugin, a única opção é “drag-vertical” (string).
  • fx. “normal” ou “tips” (string).
  • wheelGap. “Distância” da rolagem quando se usa a rodinha do mouse (px).
  • smart. Habilita o “smart mode” (bool).
  • fixWidth. Corrige o bug de float do IE7 caso o alvo do SmartScroll tenha margem (int).

Por exemplo, um smart scroll com prefixo de classe “v1”, largura de 300px, algura de 500px, whell gap de 40px e smart mode habilitado:


$('#MyTarget').smartScroll({
  prefix: 'v1',
  width:30,
  height:500,
  wheelGap:40,
  smart:true
});

Outros exemplos podem ser vistos na página oficial do SmartScroll plugin.

Além destas opções, é preciso ter em mente o esquema de CSS usado no SmartScroll. Sem ele, é impossível estilizar corretamente seu scroll e você não conseguirá customizá-lo.

SmartScroll CSS Schema
SmartScroll CSS Schema: clique para ampliar

Pode parecer um pouco confuso mas, basicamente, basta envolver o conteúdo que se quer fazer scroll em uma div qualquer e inicializar o script a partir de seu ID, passando as opções desejadas. Veja um exemplo simples de CSS:


div#MyTarget {
width:240px; height:140px;
}

div.MyPrefix_targetContainer {
border:1px dotted #ccc;
}

div.MyPrefix_target {
height:auto;
margin-bottom:10px;
}

div.MyPrefix_sliderBackground {
background:#0CF;
}

div.MyPrefix_cursor {
height:26px; background:#09F;
}

Smart Mode

Uma das opções do SmartScroll é o “smart mode” que, por padrão, vem habilitado. Ele funciona juntamente com o parâmetro “fx”:

  • normal. Todos span ficam visíveis.
  • tips. Os span ficam com efeito de aparecimento.

Se ainda não ficou clara essa funcionalidade, veja este exemplo simples de títulos dentro do container-alvo do SmartScroll:


<div id="MyTarget">
  <p title="Span #01" class="bigBlue">SPAN #01</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p title="Span #02" class="smallBlue">SPAN #02</p>
  <p>Conteúdo</p>
  <p title="Span #03" class="bigBlue">SPAN #03</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p title="Span #04" class="smallBlue">SPAN #04</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p title="Span #05" class="smallBlue">SPAN #05</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
  <p>Conteúdo</p>
</div>

Conclusões sobre o SmartScroll

Certamente é um diferencial, para a apresentação de conteúdos com scroll num site, uma aparência personalizada e efeitos de sumarização de conteúdos. Ter scroll diferenciado, condizente ao design do site mostra que os desenvolvedores tiveram um cuidado especial com esta parte e passa uma caracterização mais profissional.

Por estes motivos, o SmartScroll está recomendado!

Como Criar Um Site Em Joomla Para A Sua Empresa – Super Manual – Parte 29

Olá Pessoal!

Na penúltima parte desse super manual irei tratar de forma bem prática sobre dois recursos bem interessantes que devem ser visto com bons olhos e serem aplicados ao seu site: SEO e Google Maps.

SEO

Sobre SEO já começamos a tratar na parte 21, onde detalhamos sobre as URLs amigáveis. Aqui serão dadas apenas dicas práticas sobre como melhorar os artigos adicionados ao Joomla que irão ser as páginas do seu site. Veja:

  • Nos títulos é muito importante que você coloque uma descrição completa, exata e sucinta do que irá falar na página, pois é um dos itens de maior relevância para os buscadores;

  • Sempre adicione informações de Metadados para cada página do seu site. São elas que irão servir como “porta de entrada” para diversos novos clientes que estão procurando produtos, serviços e informações na internet. Você irá adicionar esses dados em ‘Informações de Metadados’ de cada artigo:

Na Descrição, coloque um resumo daquilo que a página está informando. Seja breve e se possível não ultrapasse 140 caracteres, pois os buscadores apresentam apenas textos curtos para seus usuários. Nas Palavras-chave você deverá adicionar todas as palavras que de alguma forma lembrem o texto da página e que estejam sendo procurados pelos internautas. Procure adicionar palavras objetivas e de pouca concorrência, como por exemplo, os produtos e serviços oferecidos pela sua empresa na sua cidade;

  • Quando você for escrever algum texto em alguma página, todo o texto, título e links devem estar “alinhados” às informações de metadados, ou seja, todas as palavras utilizadas precisam fazer parte do conteúdo da página;
  • Sempre que possível faça uma atualização no seu site empresarial, adicionando fotos, conteúdo original e de relevância. Isso ajuda muito no posicionamento do site nos indexadores;

Tomando esses cuidados básicos seu site será um “agente de propagandas” bem útil!

Google Maps

Com esse recurso sua empresa será rapidamente localizada em caso de visitas. Existem muitos métodos e extensões de mapas disponíveis para o Joomla. O mais simples e funcional que encontrei foi o GoogleMap Light, um componente que irá facilitar bastante o trabalho.

O primeiro passo é o download e a instalação do componente (tratado na parte 23). Após a instalação um novo grupo de submenus é criado dentro de Componentes com muitas opções. Claro que não será necessário acessar todos eles no momento.

Será feito apenas o passo a passo básico sobre como adicionar um mapa ao site. O resto é com você. Vamos lá?

O primeiro passo é acessar ‘Componentes -> Googlemap -> Configuration’:

Nessa nova área clique no hiperlink ‘Link to sign up for a key’ para adquirir a API do Google Maps:

Na nova página, localize a seguinte parte:

Preencha o campo ‘My web site URL’ com o endereço completo do seu site, marque a opção ‘I have read […]’ e clique em ‘Generate API Key’:

É necessário possuir uma conta nos serviços do Google, pois agora é solicitado o e-mail e senha para entrar:

Caso ainda não possua uma conta no Google, clique no campo ‘Crie uma conta agora’ e seja bem vindo ao Google!

Logo após o login você verá a sua Chave, mas talvez seja necessário novamente inserir as informações do seu domínio como foi feito anteriormente:

Copie a chave e cole na opção ‘Google API(s)’:

Informe ainda a mesma Homepage informada ao criar a chave e clique em ‘Salvar’.

Antes de prosseguir, você precisará exatamente de informações sobre o mapa que for utilizar, tais como a Latitude e a Longitude. Por isso lá vai uma pequena aula de Google Maps.

A primeira coisa é acessar o Google Maps:

Insira o endereço desejado e clique em ‘Pesquisar no Mapa’. Aparecerá um pequeno “marcador” vermelho no mapa indicando a localização exata. Caso não esteja correto, clique com o botão direito no local e depois em ‘Centralizar mapa aqui’:

O próximo passo é clicar no botão ‘link’ que está no canto superior direito do mapa:

Copie a URL em destaque para um editor de texto e vamos analisa-la um pouco:

A URL da figura é:

“http://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=Rua+Henrique+Novaes,+Vit%C3%B3ria+-+Esp%C3%ADrito+Santo&aq=0&sll=-20.319179,-40.330049 &sspn=0.002681,0.005681&ie=UTF8&hq=&hnear=R.+Henrique+Novaes+-+Centro,+Vit%C3%B3ria+-+Esp%C3%ADrito+Santo,+29010-490&ll=-20.319778,-40.329834 &spn=0.002681,0.005681&z=18″

Bem estranho não é verdade? Mas repare que existem duas informações em negrito. Essas são as coordenadas de Latitude e Longitude do endereço que centralizamos na tela. No primeiro conjunto (-20.319179,-40.330049) é aquele marcador vermelho criado pelo Google e o segundo (-20.319778,-40.329834) é referente a ação com o botão direito do mouse ‘Centralizar mapa aqui’.

Essas duas informações serão importantíssimas para o próximo passo dentro do Joomla. Acesse ‘Componentes -> Googlemap -> Manage Categories’ para criar uma categoria:

Selecione a categoria de exemplo e remova-a. Agora crie um novo e preencha com as seguintes informações:

  • Nome: define um nome;
  • SetCenter: coloque as coordenadas escolhidas;
  • Width e Height: tamanho
  • Zoomlevel: nível do zoom;

Nessa mesma tela adicione as informações que aparecerão antes (Pre Description) e depois (After Description) do mapa. Também não se esqueça de confirmar sua publicação:

Salve essa categoria e vá em ‘Componentes -> Googlemap -> Manage Destinations’, exclua o destino que está cadastrado e clique em ‘Novo’, preenchendo com as seguintes informações:

  • Name: defina um nome;
  • Latitude: insira a informação da latitude escolhida;
  • Longitude: insira a informação da longitude escolhida;
  • Text of destination: deixe uma descrição;
  • Category: selecione a categoria que acabamos de cadastrar;
  • Published: cliquem em sim para deixar publicado.

Nas outras opções não há necessidade de alteração das opções. Agora clique em ‘Salvar’. Só para confirmar, entre novamente nas opções do destino que acabou de criar e confira as mudanças no pequeno mapa dessa opção:

Se estiver indicando o mapa no ponto que você configurou então tudo está indo muito bem. 😀

Agora precisamos adicionar o mapa ao site empresarial. Para isso você precisa criar um item de menu. Vá em ‘Menus -> Top Menu’ e clique em ‘Novo’:

Escolha o tipo de menu indicado na figura e nas opções do menu defina o ‘Título’ e selecione a categoria nos parâmetros básicos:

Não se esqueça de deixar em ‘Sim’ na opção ‘Publicado’. Agora clique em ‘Salvar’ e confira o resultado no front-end do seu site:

Apesar de muitas informações o componente é muito fácil de ser usado e automatiza todas as tarefas.

Qualquer dúvida, sugestão, crítica ou elogio utilize os comentários. O próxima parte será a última desse super manual e pode ter certeza de que fecharemos com chave de ouro.

Fiquem na paz e até lá!

Quite Delicious Button: seus artigos no Delicious de forma elegante

Quite Delicious Button

Depois do advento da chamada web 2.0 (termo que, pessoalmente, não tenho muita afinidade), o mote do compartilhamento ficou forte. Serviços dos mais diversos, que favorecem este objetivo, foram surgindo e surgem até hoje; dentre estes serviços, um dos mais “tradicionais”, conhecidos e populares é o Delicious, que serve para as pessoas fazerem favoritos online e compartilhar estes endereços de sites com os outros membros da comunidade através de critérios e filtros simples e eficientes.

E uma boa maneira de favorecer a divulgação e compartilhamento das páginas de seu site é prover um meio fácil para que seus visitantes adicionem suas URLs em seus respectivos delicious. Para isso, existe uma maneira simples e elegante: o plugin para jQuery Quite Delicious Plugin.

Com Quite Delicious é possível apresentar um botão para que as pessoas facilmente adicionem um link a seus delicious, isso de forma bastante simples e com um visual agradabilíssimo, bem ao estilo Delicious. E mais: o botão é feito sem a utilização de imagens, o que torna seu funcionamento e carregamento do site, como um todo, melhores (mostrando, inclusive, quantas outras pessoas já favoritaram a página).

Usando o Quite Delicious Button

A primeira coisa é inserir os scripts-base necessários (é possível fazer download do Delicious Button e inserir o script diretamente, caso prefira):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" target="_blank"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js" target="_blank"></script>

É preciso que, na página que vai se valer do plugin, exista um link com a classe “delicious-button” e apontando para o URL que se deseja usar.


<a class="delicious-button" href="http://www.webmaster.com.pt/">Salvar no Delicious</a>

Seu botão para os visitantes adicionarem a página ao delicious já está pronto! Vale lembrar que, por padrão, o título usado para favoritar no delicious é o título da própria página, portanto, atenção com o SEO.

Outra maneira de inserir o Quite Delicious Button

Existe uma outra maneira de se ativar o plugin para o link desejado, utilizando um pouco da própria programação do jQuery. Exemplo:


<a class="delicious-button-2" href="http://delicious.com/save">Salvar no Delicious</a>
<script type="text/javascript">
$(document).ready(function(){
   $('a.delicious-button-2').deliciousButton({
      url: 'http://www.webmaster.com.pt/',
      title: 'Webmaster.pt - Marketocracia Digital',
      button: 'wide'
   });
});
</script>

Com isso, dentre as opções do Quite Delicious Button, é possível usar o botão “wide“, mais discreto e compacto.

Conclusão sobre Quite Delicious Button

É excelente quando divulgação espontânea acontece com as páginas de um site. É sinal de que as coisas estão indo bem e o trabalho feito está rumando pelo caminho certo. Aproveitar para facilitar o trabalho de quem quer efetuar essa divulgação, certamente é mais um ponto positivo para o sucesso do site e, usando o Quite Delicious Button, isso é feito de forma bastante elegante e agradável.

Use sem moderação!  😉

Como Criar Um Site Em Joomla Para A Sua Empresa – Super Manual – Parte 28

Olá Pessoal!

Estamos quase no fim desse super manual, faltando apenas três partes, nas quais serão discutidos diversos assuntos importantes ainda pendentes, dicas, sugestões de componentes e alguns outros assuntos.

E um dos itens que não pode ser ignorado no seu site empresarial é quanto à velocidade de carregamento das páginas.

Por isso antes de você “entupir” o seu site com diversos recursos e componentes ou ainda muitas páginas, imagens ou animações, siga as orientações listadas nessa parte.

Servidor de Hospedagem e Melhores Práticas

Como o Joomla é um CMS toda a informação é requisitada do Banco de Dados do servidor de hospedagem. Então para montar cada página do seu site, ele busca todas as informações e arquivos “embutidos” nela. Isso inclui os módulos, menus, componentes, plug-ins, texto, imagens e animações.

Por isso vou listar aqui algumas dicas úteis nesse sentido, lembrando que o assunto é bem mais extenso e complicado à medida que o site for crescendo de tamanho. Veja:

  • A primeira dica é escolher um bom servidor de hospedagem, que tenha ótimo processamento, espaço livre com folga e uplink alto;
  • Verifique ainda se o servidor é dedicado ou VPS. No primeiro caso somente o seu site estará hospedado no servidor e no segundo existe um compartilhamento de recurso entre os vários sites hospedados. Não que o VPS seja um mau negócio (geralmente é mais barato), mas é preciso ficar atento à quantidade de pessoas que estão compartilhando o site com você;
  • Utilize títulos, textos, imagens e animações otimizados. Isso ajuda na velocidade de carregamento das páginas, fica esteticamente mais bonito e ainda ajuda o seu site a ser “bem visto” pelos indexadores de conteúdo, como o Google, por exemplo. Se possível, procure utilizar técnicas SEO (até o final desse super manual mais dicas);
  • Procure utilizar temas e componentes otimizados e validados para o W3C;
  • Não adicione muitos componentes ao seu site. Utilize somente aqueles que sejam de suma importância, que estejam “alinhados” com seu negócio e que estejam disponíveis no repositório oficial ou tenham suporte premium (componentes pagos). Exemplo: para que você vai adicionar um componente de loja virtual se esse não é o objetivo do seu site?
  • Habilite o cache do Joomla. Não sabe como? Ainda nesse artigo será tudo bem detalhado;
  • Utilize extensões de performance do Joomla ou ainda faça modificações no próprio código-fonte. Mas isso é um assunto mais avançado e, portanto para sites maiores. É preciso tomar cuidado com isso, pois senão o efeito pode ser o contrário ou ainda pior e seu site pode ficar todo “danificado”. Se possível contrate um profissional somente para verificar essa questão;
  • Pesquise por artigos e tutoriais relacionados ao assunto. Aqui no Webmaster.pt você encontra vários que com certeza te ajudarão muito.

Habilitando o Cache do Joomla

O cache de páginas não é exclusivo do Joomla. A maioria dos CMS utilizam esse recurso para agilizar o carregamento das páginas.

Seu método é bem simples: ele armazena cada página já visitada do Joomla e por isso essa página não precisa ser “montada” novamente pelo CMS, ou seja, uma página em cache não busca as informações no banco de dados toda vez que é requisitada pelo visitante do site.

No Joomla existem dois métodos de caching. O primeiro é o de Cache de Módulos, que apenas guarda “partes” da página.

Para ativa-la, é necessário acessar a área administrativa, ir em ‘Site -> Configuração Global’, acessar a aba ‘Sistemas’ e localizar o bloco ‘Configurações de Cache’:

Por padrão ele vem desabilitado. Porém basta selecionar ‘Sim’ na opção ‘Cache’ que ele já estará funcionando no seu site. Na opção ‘Tempo do Cache’ você define em minutos o “tempo de vida” de cada página, ou seja, quanto tempo até a próxima atualização. Na opção ‘Gerenciador do Cache’ existe somente a opção ‘Arquivo’ e, portanto não existe outra ação.

Agora clique em ‘Salvar’ e faça um teste para sentir a diferença no carregamento. Cada módulo ainda possui uma configuração independente e isso você encontra em seus ‘Parâmetros Avançados’, desde que seja compatível com o cache:

E também existe o Cache das Páginas, por meio de um plug-in nativo, mas que vem desabilitado por padrão. Para ativa-lo vá em ‘Extensões -> Administrar Plugin’, localize o ‘System – Cache’ e clique em cima de seu nome para editar suas propriedades:

Clique em ‘Sim’ na opção ‘Habilitado’ para deixa-lo ativo no seu site. Existe uma opção interessante, a ‘Usar Cache de Navegador’ que habilitado armazena as páginas no computador do visitante, agilizando assim bastante seu tempo de carregamento. E fique tranquilo, pois é possível determinar o “tempo de vida” de cada página em cache na opção ‘Tempo de Vida do Cache’. Basta selecionar de quantos em quantos minutos é feito uma “atualização”.

Limpar o Cache

Existe a possiblidade de você fazer uma limpeza em todas as páginas geradas em cache. Para isso vá em ‘Ferramentas -> Limpar Cache’:

Agora basta selecionar algum grupo específico ou todo e clicar no botão ‘Remover’.

Agora vá em ‘Ferramentas -> Remover Cache Expirado’:

Clique no botão ‘Remoção expirou’. Mas veja o que diz o Joomla:

“ATENÇÃO: Isto pode causar uso intenso de recursos, em sites com um grande número de itens!”

Então faça esse procedimento em horários de muita visitação do site, pois seus visitantes com certeza vão reclamar, ainda mais se o site tiver muita coisa.

Esse segundo procedimento não limpa as páginas em cache ativas, portanto sempre execute as duas ações toda vez que for adicionar ou modificar algum item do Joomla, pois assim você previne erros de atualização para o seus visitantes.

Chegamos ao fim de mais uma parte e quase encerrando esse super manual.

Fiquem na paz e até a próxima.