ueb3 &#187; jQuery

2. Tabs simples com jQuery

3. Tabs simples com jQuery

4. Tabs simples com jQuery & CSS

5. jQuery Tabs apresentando menu de navegação

6. Iniciando com jQuery Tabs

7. Como criar um efeito de slide com abas em jQuery

8. JavaScript: jQuery Tabs

9. Criar um efeito de Flip para conteúdos com jQuery

10. Tabs muito simples com jQuery

11. Criando facilmente jQuery Tabs

12. Animação para apresentação de conteúdos com jQuery

13. Tabs jQuery com efeito Fade

14. Efeitos de transição na apresentação de conteúdos com jQuery

15. jQuery Tabs para apresentação em barra lateral

50 Scripts jQuery úteis para seu site

Douglas L. Figueiredo — Fri, 19 Feb 2010 10:55:57 +0000

Todos sabem que o jQuery vem sendo usado cada dia mais por desenvolvedores web. Por ser um framework que torna o desenvolvimento JavaScript muito mais fácil, o jQuery vem em muitos casos substituindo o nosso querido amigo Flash.

Encontrei este artigo no ProBlogDesign, que reune 50 excelentes scripts jQuery. Vale a pena conferir, pois todos são muito úteis, e com certeza serão importantes no desenvolvimento do seu projeto.

Clique na imagem para acessar ou clique aqui.

jQuery 1.4 saiu!

Douglas L. Figueiredo — Fri, 15 Jan 2010 13:12:21 +0000

jQuery 1.4 foi lançado recentemente. Esta não era simplesmente uma versão de manutenção, como alguns especularam, há muitos novos recursos, melhorias de desempenho e melhorias incluídas no 1.4! No NetTuts tem um post que aborda os novos recursos e melhorias que você pode encontrar na nova versão.

Você pode baixar o jQuery 1.4 aqui: http://code.jquery.com/jquery-1.4.js

Você pode acessar o post do NetTuts aqui: http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

7 erros comuns no webdesign

Douglas L. Figueiredo — Thu, 14 Jan 2010 13:02:25 +0000

Este texto é original do Tom Kenny, e vi traduzido no blog do Bruno Ávila. Aproveitei e inseri alguns comentários meus pro meio também. Vale a pena conferir, são dicas muito boas para quem quer aprender e crescer na profissão webdesign.

1. Uso desnecessário do Flash

Tom diz que o flash pode ser muito bem utilizado, como animações isoladas ou ferramenta de vídeo streming. Mas que as desvantagens do uso do flash são inúmeras quando mal empregadas. Seu uso no menu por exemplo, deixa o site menos acessível, principalmente para buscadores como o Google.
Uma boa opção que temos hoje para animações que não seja em flash, é a biblioteca JavaScript chamada jQuery. Esta linguagem nos da muitas opções de animações de menu – veja 12 exemplos que postei anteriormente aqui no ueb3 – e ainda mantém totalmente acessível aos buscadores.

2. Ferramenta de busca que não presta

Quem tem um site hoje sem ferramenta de busca tá perdendo leitores. É importantíssimo uma boa ferramenta de busca no seu site. E isso é fácil de resolver, sites como o Google fornecem esse serviço de busca especialmente para o seu site, dê uma olhada. Hoje só não tem busca no seu próprio site quem não quer, afinal o serviço é grátis e poderoso.

3. Imagens ruins

Segundo Kenny, hoje temos dois tipos de imagens ruins quando se trata de web design. A primeira é o uso de imagens que são desinteressantes ou irrelevantes. Boas Imagens podem transmitir um significado mais rapidamente e passar uma mensagem de forma muito eficaz.”Uma imagem vale mais que mil palavras”, o que é especialmente verdadeiro quando se trata de web design.
A segunda é a qualidade das imagens, de compressão pesada tornando imagens borradas, ou então imagens redimensionadas ficando esticadas ou esmagadas, alterando sua relação de aspecto. Alguma das situações acima, é inaceitável nos dias de hoje mas infelizmente ainda muito frequente.
Existem inúmeros programas gratuitos para edição e compressão de imagens. Sabendo usar as imagens corretamente eu seu site, com certeza este será visto com outros olhos e lhe trará uma quantidade muito maior de visitantes.

4. Uso de URLs estranhas

Tom lembra ainda dos links confusos gerados principalmente por sistemas de gerenciamento de conteúdo. Links como www.exampleurl.com/?p=52 não querem dizer nada, nem a você nem aos motores de busca, o que pode ser prejudicial, por exemplo, na colocação do ranking de resultados do Google.
O ideal é sempre utilizar as chamadas “url’s amigáveis”. Nelas sempre consta o nome da página ou artigo que está aberto no momento (veja o exemplo no próprio blog do ueb3). Normalmente CMS’s como WordPress e Joomla dão a opção para url amigável.

5.A falta de uma mensagem clara

É importante que o visitante entre no seu site e perceba em poucos segundos do que se trata. É frustrante entrar num site e não entender logo na capa o que aquilo ali faz. Às vezes basta um pequeno slogan junto da logo ou então uma imagem do produto em questão. Não é necessário muita coisa e firula não, basta mostrar a ‘cara’ do site na página inicial, e o conteúdo detalhado fica para as páginas internas.

6. Não entender as necessidades do cliente

Nesse caso o cliente que Tom se refere é o seu cliente, aquele que te contratou para fazer o site e não o cliente do seu cliente.
É fundamental que você compreenda o que o seu cliente precisa e como funciona o produto ou serviço que ele oferece. Entendendo o que seu cliente quer, principalmente através de um briefing bem feito, possibilitará que você apresente um trabalho dentro do esperado, evitando assim que o cliente diga “Não gostei, faça de novo”.
99% das vezes que o cliente manda voltar pra casa para fazer um novo layout é culpa do web designer que não entendeu o que o cliente queria e fez algo completamente diferente do esperado. Por isso costumo dizer que o briefing é a etapa mais importante de uma criação para a web.
Tudo bem, eu sei que muitas vezes o cliente não sabe muito bem o que quer em relação as cores e tudo mais, mas isso você deve ter de explicar o porque de cada coisa. Certa vez tive um cliente que queria a logo no topo direito e um banner de publicidade do topo esquerdo. Neste caso, cabe ao webdesigner explicar que o topo esquerdo é um padrão internacional para identificação do dono do site.
O trabalho do webdesigner é montar um quebra cabeças. Pegar todas as necessidades do cliente – através do briefing - e montar dentro do layout como se fossem peças. Todas encaixadas e em harmonia.

7. Ignorar o Internet Explorer

Mesmo que você use o Firefox, Safari ou outros para trabalhar e fazer seus testes, na hora de colocar no ar é importante adaptá-lo ao Internet Explorer, afinal a grande maioria dos usuários comuns ainda utilizam IE como navegador principal. Tom Kenny afirma: “A maioria dos usuários sequer sabem o que é um navegador”.
Como em todas as profissões, a de webdesigner também tem seus pontos ruins, e eu as considero: IE6, IE7, IE8…hehe

O que acharam?

12 Tutoriais de Menus Animados com jQuery

Douglas L. Figueiredo — Fri, 21 Aug 2009 16:54:58 +0000

O tutorial abaixo foi traduzido do original por mim, com a idéia de lhes ajudar com este novo recurso jQuery. Abaixo você verá vários exemplos e como aplicá-los em seu projeto junto com HTML e CSS. Divirta-se

Navegação é um componente essencial para websites. A boa navegabilidade leva o usuário com maior facilidade e rapidez até a informação desejada. Aqui temos 12 excelentes tutoriais para criar menus de navegação para seu projeto, utilizando o poderoso jQuery, framework JavaScript.

1.Menu horizontal animado com jQuery

Este tutorial nos mostra como criar uma menu interativo usando jQuery, nos dando uma animação na horizontal quando o mouse estiver sobre este link, mostrando informações escondidas referente ao link.

2. SlidingMenu usando jQuery

Este tutorial explica como criar um menu ‘deslizante’ a partir de seu ícone, mostrando mais detalhes do link que o mouse sobrepor.

3. Criando um bom menu imitando kwicks jQuery Plugin

Se você tem sempre usado o kwicks jQuery plugin, este menu é uma exata imitação dele. Este tutorial explica como alcançar o efeito do kwicks usando jQuery.

4. Menu com rolagem horizontal utilizando CSS & jQuery

Este tutorial explica como alcançar um deslocamento horizontal do menu utilizando CSS e jQuery.

5. Menu Drop-down usando jQuery

Se você possui um pequeno espaço e necessita mostrar muitos links, seus problemas acabaram, com este plugin você consegue criar um ‘menu suspenso‘ utilizando jQuery.

6. RolloverTooltips com jQuery

Este tutorial nos dá uma ferramenta para exibir “dicas” animadas sobre os ícones de navegação. Uma agradável opção para exibir maiores informações sobre o link em questão.

7. Estilos de links baseados nas extensões dos arquivos

Se você necessita apresentar diversos tipos de documentos em sua página web este tutorial pode te ajudar. Ele ensina como diferenciar os links baseando-se nos tipos de arquivos.

Tutorial

8. Como criar um menu inspirado no efeito do ‘Mootools Homepage’ com jQuery

Criando um ótimo efeito para menu vertical usando jQuery inspirado em um velho efeito mootools homepage navigation.

9. Criando um menu com teclas de atalho – jQuery

Este tutorial nos ensina a criar um menu que trabalha com teclas de atalho, poupando o usuário de levar o mouse até o menu de navegação.

10. jQuery: Menu ‘desbotado’ – Substituindo Conteúdo

Criar um efeito legal do menu ‘desbotando’ e substituindo o conteúdo da página.

11. Criando uma navegação legal com CSS & jQuery

Este tutorial é uma réplica de um menu em flash, porém utilizando CSS e jQuery. Observe como o efeito é baseado no flash, porém não utiliza o flash.

12. Criando um Menu Flutuante usando HTML, CSS & jQuery

Este tutorial vai te ensinar como criar um menu flutuante com jQuery. Muito útil para página de conteúdo extensos.