Quando o assunto é web design, a criatividade dos bons designers não tem limites. Eles criam peças incrivelmente belas, com boa usabilidade e navegabilidade e, sempre que possível, com foco na experiência do visitante (pelo menos, é o que se espera). Entretanto, algumas vezes tamanha criatividade não pode ser totalmente “convertida” em uma página de web em função de dificuldades técnicas que, por ventura, possam existir.

Não são raros os casos em que o programador de interface desconhece técnicas para fazer o HTML+CSS funcional ficar idêntico à imagem que lhe foi passada. Um dos casos comuns em que isso acontece é quando há elementos arredondados na concepção do visual do site. Alguns consideram prover elementos arredondados uma tarefa complexa e, exatamente pensando nisso, existe um plugin excelente, chamadojQuery Curvy Corners.

Com jQuery Curvy Corners é possível:

• Arredondar elementos a nível de bloco (ex. DIVs)
• Suporte a anti-aliasing
• Bordas e imagens de background

O Curvy aplica, dinamicamente, alguns conceitos de CSS3 para realizar o arredondamento. Uma de suas grandes características é que, caso o browser já tenha suporte nativo, ele simplesmente não faz nada, deixando a renderização por conta do próprio navegador e poupando o uso de recursos.

Como Usar o jQuery Curvy Corners

Existem várias maneiras de se usar o Curvy Corners; a mais simples é a mostrada a seguir. Para começar, faça o download do script e descompacte-o na estrutura de diretórios de seu projeto. Existirem várias versões do script; pessoalmente, prefiro a minificada.

Então, basta fazer a chamada ao script no “head” dos documentos que deseja que o script atue:

<script type="text/javascript" src="/js/jquery.curvycorners.min.js"></script>

Agora, simplesmente escolha o(s) elemento(s) de bloco que quer arredondar e escreva a linha de programação para ativar o script:

$('.arredondado').corner();

Simplíssimo!

Oções do jQuery Curvy Corners

É possível, também, especificar o “nível de arredondamento” para cada canto do elemento-alvo. Usa-se a seguinte convenção:

• tl = top left (canto superior esquerdo)
• tr = top right (canto superior direito)
• bl = bottom left (canto inferior esquerdo)
• br = bottom right (canto inferior direito)

Se quiséssemos, por exemplo, um elemento arredondado com os cantos da esquerda em 10px e, os da direita, 20px, poderíamos usar o seguinte código:

$('.arredondado').corner({

  tl: { radius: 10 },

  tr: { radius: 20 },

  bl: { radius: 10 },

  br: { radius: 20 }

});

Para ativar o anti-alias, é só inserir mais uma pequena instrução:

$('.arredondado').corner({

  tl: { radius: 10 },

  tr: { radius: 20 },

  bl: { radius: 10 },

  br: { radius: 20 },

    antiAlias: true

});

Funções do jQuery Curvy Corners

Algo muito interessante sobre o script é o arredondamento e “desarredondamento” dinâmicos possíveis de se fazer. Basta usar, respectivamente, as funções redrawCorners() e removeCorners(). Por exemplo, caso queira retirar o arredondamento quando algum elemento for clicado, use:

$('a').click(function(){

  $('.arredondado').removeCorners();

});

Conclusão sobre o jQuery Curvy Corners

Como citado, existem outras maneiras de se usar o jQuery Curvy Corners, maneiras essas que podem ser observadas e estudas no site oficial do plugin. Além disso, lá é possível encontrar diversos exemplos de uso do Curvy Corners.

Para projetos que precisam atender a um web design mais arrojado através de arredondamento de elementos, certamente este excelente plugin para jQuery realiza bem a tarefa. Por arredondar de forma fácil elementos, por ser executado somente em navegadores sem suporte a CSS3 e por ser crossbrowser, o Curvy está, definitivamente, recomendado!

Elementos HTML Arredondados Com jQuery Curvy Corners é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Imagens Arredondadas Com IMGr jQuery Image Rounder
2. Menu Horizontal Que Segue O Scroll Down – jQuery
3. jQuery – Formulário Login Com Efeito Deslizamento

Já há alguns artigos temos falado da importância de se apresentar elementos/efeitos diferentes e interessantes nos sites. Atualmente, com, literalmente, milhões de sites semelhantes, as diferenças e detalhes positivos fazem a diferença.

Gostaria de apresentar uma dessas “alternativas” para se fazer algo inovador nos sites, que é apresentar listas não ordenadas de forma completamente diferente do que você já viu usando o plugin para jQuery MobilyBlocks.

O MobilyBlocks permite apresentar listas não-ordenadas através de uma animação circular. Seu visitante pensará que vai encontrar mais do mesmo, mas vai se surpreender bastante ao se deparar com este efeito incrível!

Como usar o MobilyBlocks

A primeira coisa é fazer o download MobilyBlocks. No arquivo compactado você encontrará algumas pastas com arquivos além dos estritamente necessários (pois vem junto um exemplo para demonstração e estudo). Na verdade, os arquivo essenciais para o funcionando do plugin são apenas 3, que devem ser inseridos nas páginas de seu site que conterão o efeito (obviamente respeito a estrutura de diretórios de seu próprio projeto):

<link href="css/default.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/mobilyblocks.js" type="text/javascript"></script>

A estrutura para que o script funcione é tão-somente a estrutura simples e já tradicional de uma lista não ordenada. A dica principal é usar imagens como itens dessa lista para impactar ainda mais o visitante e tornar o efeito ainda mais bonito (também fica interessante já especificar uma imagem de background para o próprio elemento <ul>):

<div class="socials">

  <ul class="reset">

    <li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>

    <li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>

    <li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>

    <li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>

    <li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>

    <li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>

  </ul>      

</div>  

Depois disso, basta apontar para a lista que se deseja aplicar o efeito do MobilyBlocks, fazendo uma chamada simples à sua inicialização:

$('.socials').mobilyblocks();

E pronto, não é preciso mais nada! Agora você já pode conferir este incrível efeito de animação circular!

Opções do MobilyBlocks

O MobilyBlocks possui algumas opções simples:

Então, por exemplo, se quiséssemos aplicar um efeito de MobilyBlocks em uma lista de classe “special-list” com sentido anti-horário e duração de 450ms, teríamos o seguinte código:

$('.special-list').mobilyblocks({

  direction: 'counter',

  duration:450

});

Conclusão sobre o MobilyBlocks

Como você pode conferir na página de exemplo oficial (e no arquivo compactado que você baixou), este é um efeito totalmente inovador, que não se encontra normalmente por aí.

Usá-lo certamente fará com que seu site tenha um diferencial importante em relação à concorrência e, por isso, o MobilyBlocks é altamente recomendado!

Menu Espetacular Com Plugin jQuery MobilyBlocks é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Enquete Animada Com jQuery E PHP – Efeito Espetacular!
2. Notificações Interativas Com SlideNote – Plugin jQuery
3. Avisos Personalizados Com Plugin jQuery Humanized Messages

Não é exagero dizer que é um verdadeiro sonho para os webdesigners poderem contar com barras de rolagem estilizadas no site (estou falando sem utilizar flash). Um dos eternos “entraves” para que aquele que mexe com design para web considerar o site como de qualidade, é não apresentar barras de rolagem mais condizentes com a identidade visual do site, mas sim aquele cinza-padrão sem nenhuma questão de ser interessante…

Mas agora essa insatisfação pode acabar, já que é possível estilizar e fazer das barras de rolagem mais bonitas e interessantes utilizando jScrollBar!

Com jScrollBar, você pode mudar o estilo padrão das barras de rolagem do site, podendo fazer aparecer imagens e, usando CSS, estilizar das mais variadas formas possíveis. Tudo de maneira simples e fácil de se implementar.

Usando jScrollBar

Quando você baixar o jScrollBar, vai encontrar no .zip os javascripts e css necessários para fazer tudo funcionar – também há algumas imagens de exemplo para se ter melhor noção de como é o funcionamento do plugin. Insira esses javascripts e css no cabeçalho de seu documento.

É preciso que seus elementos que irão apresentar a barra de rolagem personalizada sigam uma estrutura como essa:

<!-- Container principal -->

<div class="jScrollbar">

 

        <!-- Container do conteúdo do scroll -->

        <div class="jScrollbar_mask">

                <p>

                        <!-- Conteúdo -->

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...

                </p>

        </div>

 

        <!-- Container do slider -->

        <div class="jScrollbar_draggable">

                <!-- Slider -->

                <a href="#" class="draggable"></a>

        </div>

       

        <!-- Lembre-se de dar o clear nos floats -->

        <div class="clr"></div>

</div>

Então, basta inicializar o jScrollBar:

<script type="text/javascript">                                          

        $(document).ready(function(){

                $('.jScrollbar').jScrollbar();

        });                                        

</script>

Veja a página com vários exemplos de uso do jScrollBar.

Opções do jScrollBar

Existem 2 opções no jScrollBar:

• allowMouseWheel. Permite rolar com a roda do mouse (default ‘true’).
• scrollStep. Velocidade da rolagem quando allowMouseWheel é “true” (default ’10′).

Então, por exemplo, se quiséssemos uma velocidade de rolagem 15 para nosso elemento, teríamos:

        $(document).ready(function(){

                $('.jScrollbar').jScrollbar({

                scrollStep: 15

                });

        });                                        

Conclusão sobre o jScrollBar

Utilizando o jScrollBar, é possível fazer com que as barras de rolagem de seu site fiquem com a aparência diferente, podendo, ao usar sua criatividade, dar qualquer visual a suas scrollbars.

Certamente esta é uma excelente maneira para incrementar o design do site e fazer com que as coisas fiquem mais coincidentes com a identidade visual do projeto. Certamente é uma excelente pedida!

Barras De Rolagem Estilizadas Com jScrollBar é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Notificações Interativas Com SlideNote – Plugin jQuery
2. SmartScroll: Scrolls Mais Profissionais E Eficientes
3. Super Paginação Com jQuery, PHP E CSS3

É bastante comum em sites haver formulários para interações simples, como contato, reclamações, e outros; e existem, também, aqueles formulários mais complexos, como orçamentos, cotações, etc. Independentemente do caso, é importante fazer os corretos tratamentos visando a segurança desses formulários para que a utilização do site e banco de dados não sejam comprometidos.

Dentre as centenas de técnicas possíveis, uma das mais conhecidas e utilizadas no mundo todo é o Completely Automated Public Turing test to tell Computers and Humans Apart, ou como é mais conhecido, CAPTCHA. O CAPTCHA, como deve ser do conhecimento dos desenvolvedores, consiste em apresentar uma imagem com uma série de palavras aleatórias (alguns usam números) e solicitar que se digite o que foi apresentado. Caso se digite o que consta na imagem corretamente, então não se trata de um bot varrendo e testando seu site (pois um robô, teoricamente, não consegue interpretar o que está na imagem para digitar).

Apesar de ter seus pontos fracos, o CAPTCHA tem seu nível de eficiência. Mas eis que surge uma nova maneia de confirmar se quem está interagindo com o formulário é realmente uma pessoa, ao invés de um bot; uma forma de “validar o ser humano” de forma diferente, divertida e inovadora e isso é feito através do plugin para jQuery QapTcha.

Com QapTcha a confirmação dos formulários fica protegida pela obrigação de o visitante ter que usar um controle deslizante (drag & drop) para comprovar que realmente é um ser humano interagindo. Atualmente robôs não conseguem fazer isso, acredite.

O QapTcha cria no formulário um campo oculto de nome “iQapTcha” com um token aleatório. Robôs desse tipo geralmente preenchem todos os campos de formulários automaticamente. Com a interação do slider, o iQapTcha esvazia o valor contido no campo criado automaticamente e salva uma variável de sessão “iQaptcha” com valor “true”. Uma excelente medida de segurança, tenha certeza.

Como usar o QapTcha

Primeiramente, é preciso fazer download do QapTcha e adequar os arquivos que vêm zipados à estrutura de diretórios de seu projeto. Como é de se esperar, faça as chamadas corretas no <head> de seu documento. Dentro da pasta que vem com o plugin, encontram-se os javascripts necessários e uma folha de estilos:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript" src="QapTcha.jquery.js"></script>

Nisso, você vai adicionar uma div de id “captcha” em seu formulário, tal como o exemplo:

<form method="post" action="">

  <fieldset>

    <label>Nome</label> <input type="text" name="firstname" />

    <label>Sobrenome</label> <input type="text" name="lastname" />



    <!-- Adicionar esta div no form -->

    <div id="QapTcha"></div>



    <input type="submit" name="submit" value="Enviar" />

  </fieldset>

</form>

E, no arquivo PHP que o formulário aponta, é preciso realizar os devidos testes com as variáveis criadas pelo plugin:

if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha'])

  // ser-humano

}

else

{

  // bot

}

Com toda a “infra-estrutura” terminada, basta inicializar o plugin ao bom e velho estilo simples do jQuery:

$(document).ready(function(){

  $('#QapTcha').QapTcha();

});

Opções do QapTcha

O autor disponibilizou as seguintes opções:

• disabledSubmitBoolean. Booleano para adicionar a propriedade “disabled” ao botão do form (default “true”).
• txtLockStringDefault. Texto para quando o form está travado (default “Locked : form can’t be submited”).
• txtUnLockStringDefault. Texto para quando o form está destravado (default “Unlocked : form can be submited”).

Um exemplo de inicialização do QapTcha utilizando suas opções:

$(document).ready(function(){

  $('#QapTcha').QapTcha({

    disabledSubmit: true,

    txtLock: "Arraste o controle para validar",

    txtUnLock: "Formulário destravado"

  });

});

Conclusão sobre o QapTcha

Sem sombra de dúvidas, uma forma de fazer validação de formulários e protegê-los contra bots que varrem o site é medida indispensável. É possível fazer de várias maneiras, e uma delas é usando esse excelente plugin que coloca uma proteção via slider em seus forms.

O QapTcha é recomendadíssimo, principalmente para sites que queiram passar modernidade e se valerem de recursos interativos chamativos, proporcionando boas experiências a seus visitantes.

Formulários Mais Seguros Com QapTcha é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Downloads Mais Sofisticados Com jDownload
2. Text Hints Em Campos De Formulário Com CoolInput
3. SmartScroll: Scrolls Mais Profissionais E Eficientes

Existem diversos tipos de sites na internet, isso qualquer leigo em desenvolvimento é capaz de constatar por si só. E cada tipo site deve, teoricamente, primar por sua “marca”, sua característica ou características que o faça diferente dos demais. Por exemplo, um site 100% flash é indicado para ações promocionais e hotsites, site com muitos textos e poucas imagens, em portais de notícias e algun blogs, e assim por diante.

Para os sites que precisa/exigem um apelo emocional e/ou de vendas, trabalhar com imagens é uma das melhores opções existentes. Neste caso, apresentar imagens criativamente pode fazer a diferença entre ganhar ou perder visitas/vendas. Por exemplo, o site pode apresentar imagens de produtos em uma nuvem de imagens, também conhecida como image cloud.

Se é este o caso, conseguir uma cloud image de maneira fácil é a opção a ser seguida. E, para isso, existe o jQuery ImageCloud.

Com o plugin ImageCloud para jQuery, é possível selecionar imagens para compor uma nuvem de imagens que, a cada carregamento da página, aparece de maneira diferente, o que dá um ar de modernidade e sentimento de que o site está sempre se atualizando. Algo positivo, certamente. Através de suas configurações fáceis, montar ImageClouds com jQuery é bastante fácil.

Usando o ImageCloud

Para começar, é preciso fazer o download do jQuery ImageCloud (caso queira um zip com alguns exemplos, também é possível, apesar de o site oficial contem bastante coisas). Insira a chamada para o jQuery e para o javascript do plugin (de preferência o arquivo minimizado) no <head> de seus documentos, sempre respeitando a estrutura de diretórios de seus projeto para fazer a(s) referência(s):

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

<script src="jquery.imageCloud.mini.js" type="text/javascript" language="javascript"></script> 

Então, basta apontar o plugin para o elemento em que o set de imagens está e a mágica acontece:

$('#div').imageCloud();

Opções do ImageCloud

Apesar de o plugin ser poderoso, não são muitas suas opções:

• Width: Número. Especifica a largura da área da nuvem. Default “600px”.
• Height: Número. Especifica a altura da área da nuvem. Default “400px”.
• Color: Hex. Cor da borda que aparece em cada imagem. Default “#800000″ (vermelho escuro).
• Link: true|false. Se “true”, as imagens apontam para o endereço especificado no atributo “title”. Default “false”.
• Speed: Número. Velocidade do efeito (valor baixo, efeito mais rápido). Default “200″.
• BorderSize: Número. Tamanho da borda em cada imagem. Default “6″.
• BorderStyle: Tipo de borda de imagem (valores CSS, como solid, dotted, dashed, etc). Default “solid”.
• BorderRadius: Número. Arredonda a borda das imagens (não funciona em IE). Default “0″.

Nada melhor que um exemplo para ilustrar o uso das opções: veja o exemplo oficial do ImageCloud.

Conclusão sobre o ImageCloud

Certamente quando é preciso um apelo visual ou uma apresentação diferenciada de imagens, por si só, utilizar uma nuvem de imagens é uma boa pedida. Através do jQuery ImageCloud isso é passível de ser realizado com mínimo esforço de programação.

Apesar de, para usos na prática, o plugin precisar receber uma estilização mais refinada, definitivamente ele cumpre bem seu papel e, por isso, está aconselhado!

ImageCloud: Nuvem De Imagens Simples Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Legendas Elegantes Nas Imagens Com jQuery Captify
2. Imagens Arredondadas Com IMGr jQuery Image Rounder
3. Tooltips Simples E Eficientes Com jTooltip

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!

jMenu: Menu De Navegação Com Subníveis é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Navegação Em Abas Com CSS E jQuery
2. 25 Menu Espetaculares Com jQuery
3. Menu Horizontal Que Segue O Scroll Down – jQuery

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 45 ideias fantásticas que apresentamos a seguir:

ten 24 media

2udoku

AgileZen

Apple

BlackBerry

Carrefour

citi

Scoreloop

crazyegg

DELL

reinvigorate

TRUMP

BUZZDing

ElementFusion

eWedding

firehost

serj

GE

GlobalLogic

glue

HITACHI

LemonStand

LePushMail

mailer

MISSION BICYCLE

newsgator

NYBBLETECH

RBS

teamEXCELLENCE

ThyssenKrupp

UBS

Harley-Davidson

WOT

readwhale

31three

mint

EA

EPSON

MailChimp

ExxonMobil

SATURIZED

Checkout

Chapeltown

Miro 3.5

icebrrg

45 Ideias Espetaculares Para Sites De Empresas é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. 100 Ideias Para Lojas Online Parte 2
2. 32 Sites E Muitas Ideias
3. 100 Ideias Para Lojas Online Parte 1

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!

Legendas Elegantes Nas Imagens Com jQuery Captify é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. ImageCloud: Nuvem De Imagens Simples Com jQuery
2. Galeria De Imagens Espectacular Com Super Efeitos jQuery
3. Imagens Arredondadas Com IMGr jQuery Image Rounder

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!

fontResizer – Controlar Tamanho Da Fonte Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Personalizar Fonte E Estilo Da Página Com jQuery
2. jQuery MessageBox Handler: Limitar Caracteres Áreas Texto
3. Navegação Em Abas Com CSS E jQuery

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:

email@dominio.com.br

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…

Protega O Email Publicado No Seu Site Dos Spammers é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Related posts:

1. Envio De Email Através De SMTP Com PHPMailer
2. Envio Ficheiros Por Formulário Para Email
3. Neve Em Seu Site Com jQuery Snowfall