• RSS
  • Facebook
  • Twitter
Comments

Guia de SEO para Designers

De acordo com uma pesquisa que realizei, pouco mais de 1 em cada 10 pessoas não pensam SEO (Search Engine Optimization) é obrigatória como designer, e que realmente me surpreendeu é de cerca de 24% nem sequer sabem o que é SEO! Se você está entre o quarto das pessoas que não sabem o que é SEO ou entender como ele pode ajudá-lo, você deve realmente ler este artigo. Este é um guia de SEO para designers que desejam aprender sobre como tornar mais fácil para os sites ou blogs para ser encontrado pelos motores de busca. Vou explicar os erros comuns feitos por designers e desenvolvedores. Então eu vou dar algumas dicas básicas que você deve estar praticando para otimizar seu site para os motores de busca.

Por que Você Deve Saber Sobre SEO?

SEO não é só para os comerciantes on-line. Como um desenvolvedor web designer ou interface, a maioria dos SEO no local é de sua responsabilidade.

Se o site não é Search Engine amigável, você pode estar perdendo uma grande quantidade de tráfego que você não está mesmo ciente. Lembre-se, além de visitantes digitando "www.yourwebsite.com" e referências backlink, motores de busca são a forma como as pessoas só podem encontrar seu site.

Há muitos benefícios de ter um local alto. Vamos usar o ndesign-studio.com por exemplo. Eu tenho, em média, cerca de 14.000 visitantes por dia. Cerca de 40-45% do tráfego vem dos motores de busca (cerca de 6000 referências de um dia). Imagine, sem referências motor de busca, gostaria de estar a perder milhares de visitantes todos os dias. Isso significa que eu estou arriscando perder clientes em potencial também.

SEO também é um serviço de valor adicionado. Como um web designer / desenvolvedor, você pode vender suas habilidades de SEO como um serviço alargado.



Noções básicas: Como funcionam os motores de busca?



Primeiro, vamos olhar como indexador baseado em motores de busca trabalham (ambos Google e Yahoo caem nesta categoria). Cada motor de busca tem seu próprio programa automatizado chamado de "teia de aranha" ou "crawler", que rastreia a web. O principal objetivo da aranha é para indexar as páginas web, ler e coletar o conteúdo, e siga os links (internos e externos). A aranha então deposita as informações coletadas no banco de dados do mecanismo de busca chamado de índice.

Quando os pesquisadores inserir uma consulta na caixa de pesquisa de um motor de busca, o trabalho do motor de busca é encontrar os resultados mais relevantes para a consulta que corresponde à consulta de pesquisa para a informação em seu índice.

O que faz ou quebra um motor de busca é o quão bem ele responde a sua pergunta quando você executar uma pesquisa. Isso é baseado no que é chamado de algoritmo motor de busca que é basicamente um conjunto de fatores que o motor de busca usa para dizer "ei isso é relevante a página ou não?". Quanto maior o seu Rank da página para estes fatores (sim, alguns fatores são mais importantes do que outros) do que quanto maior a sua página serão exibidas nas páginas de resultados de pesquisa do motor.

Seu trabalho como um Search Engine Optimizer



Cada motor de busca tem seu próprio algoritmo em páginas da web ranking. Entender os fatores gerais que influenciam o algoritmo pode afectar a sua posição de resultado de pesquisa, e isso é o que os especialistas de SEO são contratados. SEO é um trabalho tem dois aspectos: On-Site e Off-site.

On-Site SEO: são as coisas que você pode fazer em seu site, tais como: marcações HTML, palavras-chave, links internos, a estrutura do site, etc

Off-Site SEO: são as coisas que você tem menos controle de grande parte, tais como: quantos backlinks que você começa e como as pessoas apontam para seu site.

Este é um guia para designers e desenvolvedores. A principal preocupação é a aspectos On-Site. Secretamente, porém, se você faz o seu trabalho direito ... e criar um site bonito ... e / ou produzir conteúdo útil ... você vai ter Off-Site e backlinks social bookmarks, sem sequer levantar um dedo.

Top 9 erros SEO feitos por designers e desenvolvedores

1. Splash Page



Eu já vi esse erro várias vezes onde as pessoas colocam-se apenas uma imagem grande faixa e um link "Clique aqui para entrar" na sua homepage.O pior caso - o "enter" link está embutido no objeto Flash, o que torna impossível para que as aranhas, siga o link.

Isso é bom se você não se importa sobre o que um motor de busca sabe sobre o seu site, caso contrário, você está cometendo um grande erro. Sua homepage é provavelmente maior página de seu site o ranking e será rastreado freqüentemente por aranhas. Suas páginas internas não irão aparecer no índice motor de busca sem a estrutura adequada links para as páginas internas para a aranha a seguir.

Sua página inicial deve incluir palavras-chave (no mínimo) de destino e links para páginas importantes.

2. Non-spiderable Flash Menus

Muitos designers cometem esse erro usando menus flash, como os fade-ins e menus animados. Elas podem parecer cool para você, mas não pode ser visto pelos motores de busca, e assim os links no menu flash não será seguido.

3. Flash e conteúdo da imagem

Web spiders são como um navegador baseado em texto, eles não podem ler o texto incorporado na imagem gráfica ou Flash. A maioria dos designers cometem esse erro ao incorporar o conteúdo importante (como palavras-chave alvo) em Flash e imagem.

O uso excessivo 4. Dos Ajax

Muitos desenvolvedores estão tentando impressionar seus visitantes através da implementação de recursos maciços Ajax (especialmente para fins de navegação), mas você sabia que é um erro grande de SEO? Como o conteúdo é carregado dinamicamente Ajax, por isso não é spiderable ou indexáveis pelos motores de busca.

Outra desvantagem do Ajax - uma vez que o endereço URL não recarregar, o visitante não pode enviar a página actual aos seus amigos.

5. Versionamento de projeto temático

Por alguma razão, alguns designers gostam de versão seu projeto temático em pastas de nível inferior (isto é, domain.com/v2, v3, v4) e redirecionar para a nova pasta. Constantemente mudando o local da raiz principal pode fazer você perder a contagem backlink e classificação.

6. "Clique aqui" Anchor Text Link

Você provavelmente verá muito isso quando as pessoas usam "Clique aqui" ou "Saiba mais", como o texto de ligação. Isso é ótimo se você quer ser classificado alto para "Clique aqui". Mas se você quer dizer o motor de busca que sua página é importante para um tema, que o uso dessa palavra-chave tópico / link em seu texto âncora. É muito mais descritivo (e relevantes) para dizer que "saber mais sobre o tema-chave {}"

Atenção: Não use exatamente o mesmo texto âncora em todos os lugares em seu site. Isto às vezes pode ser visto como spam motor de busca também.

7. Tag erros título comum

semelhantes título do texto ou da mesma:
Cada página em seu site deve ter uma única  etiqueta com as palavras-chave alvo nele. Muitos desenvolvedores cometem o erro de ter o título de marcas iguais ou semelhantes em todo o site inteiro. Isso é como dizer o motor de busca que cada página do seu site refere-se ao mesmo tópico e um não é mais exclusivo que o outro.

Um bom exemplo de mau uso da tag título seria o tema padrão do WordPress. Caso você não saiba, a tag de título do tema padrão do WordPress não é
que útil: Nome do Site> Blog Archive> Título da postagem. Por que não é este motor de busca amigável? Porque cada post de um blog terá o mesmo texto"Nome do Site> Blog Archive>" no começo da tag título. Se você realmente quiser incluir o nome do site na tag de título,
deve ser no final: Post Título | Nome do Site.

Exceder o limite de caracteres 65:
Muitos blogueiros escrevem títulos post muito longo. Então o que? Nas páginas de resultados de pesquisa do motor, seu título tag é usada como ligação posição.Você tem cerca de 65 caracteres (incluindo
espaços) para passar a sua mensagem ou risco de ele ficar de corte.

Palavra enchendo o título:
Outro erro comum as pessoas tendem a fazer tem sobrecarregado o Tag do título com palavras-chave. Dizer a mesma coisa 3 vezes não torná-lo mais relevante.Palavra recheio no Tag do título é encarado como spam motor de busca (não é bom). Mas pode ser inteligente para repetir a mesma palavra de diferentes maneiras:

"Dicas de fotografia e Técnicas de Fotografia para tirar fotos fantásticas"



"Photo" e "Fotografia" são a mesma palavra repetida duas vezes, mas de maneiras diferentes, porque o público pode usar qualquer um ao executar uma consulta de pesquisa.

8. Atributo alt imagem vazia

Você deve sempre descrever a sua imagem no alt atributo. O alt atributo é o que descreve a imagem para um usuário da web cego. Adivinha o quê? Os motores de busca não podem ver as imagens assim que seu alt atributo é um fator para ilustrar o que sua página é relevante para.

Dica: descrever corretamente as imagens podem ajudar a sua classificação nos resultados da pesquisa de imagem. Por exemplo, o Google pesquisa de imagens me traz centenas de referências todos os dias para os termos de busca " abstrato"e" DJ ".

9. URLs hostil

A maioria dos blogs ou plataformas de CMS tem um recurso URL amigável built-in, no entanto, nem todo blogger está aproveitando isso. Friendly URL's são bons para ambos o seu público humanos e os motores de busca. A URL é também um importante ponto onde as palavras-chave deve aparecer.

Exemplo de URL Amigável: domain.com / page-title
Exemplo de URL dinâmica: domain.com / 12356? P =

SEO Geral e Don'ts

Deixe-me dizer o que fazer, lhe dizendo O QUE NÃO FAZER:

Não ignore o seu público

Escrever sobre os seus temas de audiência preocupa. Como o quê? Descobrir, através da realização de uma pesquisa (como eu fiz), digitalizar alguns quadros de avisos relevantes ou fóruns, procurar temas comuns em e-mails do cliente, ou fazer alguma pesquisa de palavras-chave. Existem excelentes ferramentas de palavras-chave livres como o Google Keyword Tool ou SEO Book Keyword Tool e muito mais. O plano não é passar a vida fazendo a pesquisa de palavras-chave, mas só para ter uma idéia geral do que os visitantes estão interessados em

Não ser denso sobre a densidade de palavras-chave



Uma vez que você tem um tópico para os leitores, os motores de busca ajudar a encontrá-lo. Keyword Density é o número de vezes que uma palavra aparece em uma página em relação ao número total de palavras. Você quer ter certeza de suas palavras-chave estão incluídos nas áreas cruciais:

o Tag do título

URL da página (URL amigável)

A entrada principal (H1 e H2)

O primeiro parágrafo do conteúdo.

pelo menos 3 vezes no conteúdo do corpo (mais ou menos dependendo da quantidade de conteúdo e se e somente se faz sentido).



A maioria das pessoas apontar para uma palavra-chave densidade de 2% (ou seja, usar a palavra duas vezes para cada 100 palavras). Mas e se a palavra-chave é "SEO para Web Designers e Desenvolvedores Web" quantas vezes você pode repetir que, antes parece simplesmente não natural? Escrever não para os seus leitores para os motores de busca. Se você seguir as dicas
Neste artigo você vai estar escrevendo, naturalmente, para os seus leitores, que trabalha para os motores de busca também.

Atenção: Não encha a sua página com mesmas palavras-chave ou você pode ser penalizado pelos motores de busca para a palavra-chave enchimento .

Não ignore Parentes

Neste artigo, faz sentido mencionar temas como "pesquisa de palavras-chave", "crawlers motor de busca" e "título uso tag", mas que se eu mencionei uma espécie altamente traficadas termo como "planos de telefone celular" ... de fora do contexto certo ? Então use palavras-chave e outros temas que fazem sentido para o seu público, as medidas motor de busca de palavras-chave para determinar a relevância das relações também.

Carros e pneus (sim)

Web Design e Flying Monkeys (sem ... bem, às vezes)



Don't Be Afraid of Internal Linking

Deseja que o motor de busca para ver todas as páginas em seu site? Ajude o motor de busca aranha fazer seu trabalho. Não deve ser uma página (como um mapa do site ou
arquivos do blog) que vincula a todas as páginas em seu site.

Dica: Você pode promover a páginas mais importantes, inserindo links de texto no conteúdo do corpo. Certifique-se de usar o texto ligando relevantes e evitar o uso de "clique aqui" (como mencionado anteriormente).

Não Ignorar Links Quebrados



Você deve sempre procurar e corrigir os links quebrados em seu site. Se você tiver removido uma página ou seção, você pode usar o robot.txt para evitar que as aranhas rastreamento e indexação dos links quebrados.Se você tiver movido uma página ou o site inteiro, você pode usar o 301. htaccess para redirecionar para uma nova URL.

Dicas: Você pode usar o Google Webmaster Tool para encontrar links quebrados e seus 404 encontrados erros não.

Não é incompatível com Sua URL Domínio

Para os motores de busca, um www e uma URL sem www são consideradas duas URLs diferentes. Você deve sempre manter seu domínio e estrutura de URL consistente. Se você começar a promover seu site sem o "www", ficar com ela.

Não tenha medo de Codificação Semântica

Semântica e padrão de codificação não só pode fazer o seu site mais limpo, mas também permite que os motores de busca para ler sua página melhor.

Posição Resultado da pesquisa

Codificação e configurar seu site para SEO amigável pode melhorar a maneira como um motor de busca pode acessar seu site, ele não garante que você vai acabar no topo da página de resultados de motor de busca ( SERP ). Há muitos fatores na determinação da posição de resultado de busca, mas aqui está o básico:

PageRank



atenção Alguns profissionais de SEO de pagar para o PageRank do Google e outros não. Na minha experiência, não faz mal ter um alto PageRank do Google. É uma referência pouco agradável para que você saiba o quão importante Google vê a sua página web como. Você pode melhorar o seu PageRank, seguindo as dicas acima e construindo links de qualidade-up. Se você quer aprender como funciona o PageRank, Smashing Magazine tem um muito bom artigo .

Domínio Idade Antes de Beleza

Você pode se surpreender ao saber que era de domínio também é um fator no motor de busca algoritmo. domínios mais antigos têm uma história, e seu conteúdo é encarado como mais crível do que o site que começou na semana passada.domínios mais antigos, por vezes, obter a vantagem no resultado de busca.

Seja paciente

Você pode ter feito todo o direito única coisa., Mas o site ainda não está aparecendo nos motores de busca por palavras-chave do seu destino. Por quê?Porque tudo o que leva tempo. Leva tempo para que os motores de busca para indexar e classificar o seu site (especialmente para os novos domínios). Portanto, seja paciente.

Outra razão - que poderia ser as palavras-chave que você está tentando atingir são muito competitivos. Tente alterar as palavras-chave na página e você pode ter resultados diferentes. Lembre-se, você está competindo com milhões de páginas web na internet.

Recursos para ajudar a ir mais longe

Google Webmaster Tools



Google Webmaster Tools permite que você verificar as estatísticas de rastreamento do seu site. Se você ainda não usou essa grande ferramenta, no entanto, fazer login no Google Webmaster Tools , em seguida, adicione e verifique o seu site.

Depois de verificado o seu site, você pode descobrir:

Quando foi a última vez que o Googlebot rastreou seu site

Erros HTTP

404 não encontrado erros

Link externo contagens

Que palavras-chave as pessoas estão usando o link para seu site

Quais são as principais pesquisas para seu site

E mais.



Ferramentas de SEO grátis

Aqui estão algumas ferramentas de SEO online que você pode usar para verificar o seu Link Popularity PageRank, posição do Search Engine, densidade de palavras-chave, etc

www.pagerank.net

www.iwebtool.com

www.seochat.com / seo-tools

www.webconfs.com

tools.seobook.com



SEO Recursos

Aqui estão alguns links externos onde você pode aprender mais sobre SEO:

www.seomoz.org

www.seochat.com

searchenginewatch.com

www.searchengineworld.com

www.mattcutts.com



Considerações Finais

Por favor note que eu não sou um especialista em SEO (apesar de eu conseguir ter alta rankings muito em todos os meus sites: N. Design Studio , Best Web Gallery eWeb Designer Wall ). As dicas eu compartilho neste guia de SEO são baseadas no conhecimento autodidata e anos de experiência em web design.
[...]

Categories: ,
Comments

Postado por Fernando Schimit - Fox Creative

http://www.seomoz.org/term-extractor Um ótimo site para ajudar no SEO a ver os termos mais incidentes em um site
 e Este http://www.google.com/insights/search/# é o Google Insight que mostra relatórios de pesquisas por termos , onde você pode ter uma idéia do volume de buscas por região e termos especifico , indispensável
[...]

Categories: ,
Comments


by admin on mai.14, 2009, under Design, Links Interessantes
Pegando a deixa do post anterior, o Website Design Awards, dos mesmos criadores do Logo Faves (www.logofaves.com), é um acervo com os melhores designs da web e sempre se mantém atualizado. Lá você encontra os sites mais interessantes, bonitos e criativos da web, que serve como uma fonte inesgotável de inspiração na hora de você criar seu design.
Como eles mesmos se auto-denominam: “Nós mostramos os melhores designs da web. Amamos criatividade, interatividade, usabilidade e originalidade”
Acesse: http://websitedesignawards.com/
Website Design Awards



Postado por Fernando Schimit - Fox Creative
[...]

Categories:
Comments

Postado por Fernando Schimit - Fox Creative

Published August 6th, 2009 i Web Development jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site.

jQuery Image Gallery/Slider Tutorials:

Create an Image Rotator with Description (CSS/jQuery)
Create an Image Rotator with Description (CSS/jQuery) Tutorial
jQuery Image Gallery/News Slider with Caption
jQuery Image Gallery/News Slider with Caption Tutorial
Full Screen Image Gallery Using jQuery and Flickr
Full Screen Image Gallery Using jQuery and Flickr Tutorials
Create a Slick and Accessible Slideshow Using jQuery
Create a Slick and Accessible Slideshow Using jQuery Tutorial
Fancy Thumbnail Hover Effect with jQuery
Fancy Thumbnail Hover Effect with jQuery Tutorial
Simple jQuery Image Slideshow with Semi Transparent Caption
Simple jQuery Image Slideshow with Semi Transparent Caption Tutorial

Slider Gallery
Slider Gallery Tutorial
Building a jQuery Image Scroller
Building a jQuery Image Scroller Tutorial
Sliding Boxes and Captions with jQuery
Sliding Boxes and Captions with jQuery Tutorial
Create Beautiful jQuery Slider
Create Beautiful jQuery Slider Tutorial
How to: Create a Fancy Image Gallery with jQuery
How to: Create a Fancy Image Gallery with jQuery Tutorial
Coda Slider Effect
Coda Slider Effect Tutorial

jQuery Image Gallery/Slider Plugins:


Supersized
Supersized Plugin
Galleria
Galleria Plugin
Gallery View
Gallery View Plugin
jQuery lightBox
jQuery lightBox Plugin
Gallerific
Gallerific Plugin
Easy Slider 1.5
Easy Slider 1.5 Plugin
Pikachoose
Pikachoose Plugin
S3 Slider – jQuery Image Gallery
S3 Slider - jQuery Image Gallery Plugin
Sliding Image Gallery
Sliding Image Gallery Plugin
Flickr Gallery
Flickr Gallery Plugin
Simple Controls Image Gallery
Simple Controls Image Gallery Plugin
Popeye
Popeye Plugin
Smooth Div Scroll
Smooth Div Scroll Plugin
[...]

Categories: ,
Comments

Postado por Fernando Schimit - Fox Creative

[...]

Categories:
Comments



Postado por Fernando Schimit - Fox Creative
[...]

Categories:
Comments

site de origem: http://10steps.sg/photoshop/transform-photo-into-watercolor-painting/

01. Pressione Ctrl+O e abra uma imagem qualquer, para este tutorial usaremos a foto abaixo, caso queira usar a mesma imagem clique com o botão direito do mouse sobre a foto e escolha a opção Save Link As, com a imagem aberta pressione Ctrl+A para selecionar seu conteúdo e Ctrl+C para copiar.



02. Pressione Ctrl+N para criar um novo documento, defina um tamanho de 750x550 pixels, 72 dpi´s e modo de cor em RGB, pressione Ok, pressione Ctrl+V para colar a imagem dentro do novo documento, pressione Ctrl+T para abrir a caixa de Free Transform, com a tecla Shift pressionada clique em um dos pontos diagonais para redimensionar a imagem de acordo com o tamanho do documento, pressione Enter, pressione Ctrl+J para duplicar a layer, dê o nome de Blur Landscape para esta layer, vá em Filter> Blur> Smart Blur e defina o valor de 10 pixels para o Radius e 30 pixels para o Threshold.



03. Clique na layer da foto original e pressione Ctrl+J para duplicar a layer novamente, dê o nome de Outlines para esta layer, deixe ela acima da layer Blur Landscape, vá em Filter> Stylize> Glowing Edges, defina o valor de 1 pixel para Edge, 12 pixels para Edge Brightness e 15 pixels para Smoothness, vá em Image> Adjustments> Invert e depois em Image> Adjustments> Desaturate.



04. Mude o modo de blend da layer para Multiply e defina a opacidade em 80%.



05. Clique na layer Blur Landscape e pressione Ctrl+J para duplicar a layer, dê o nome de Painting, vá em Image> Adjustments> Invert e defina o modo de blend da layer para Color Dodge.



06. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha o brush abaixo (Dry Brush), na barra de opções da ferramenta defina a opacidade do brushe m 10%, passe o brush sobre o documento, sua imagem deverá ficar como na foto abaixo.



07. Agora escolha o brush Brush abaixo, defina a opacidade em 50%, reduza o tamanho do brush para 15 pixels e passe na parte da água.



08. Aumente o tamanho do brush para 100 pixels e passe na parte do céu.



09. Repita o processo para a área com grama.



10. Reduza o tamanho do brush para 30 pixels e faça alguns traços verticais na área da grama.



11. Clique na layer original da foto e pressione Ctrl+J para duplicar a layer, dê o nome de Details para esta layer, deixe esta layer acima de todas as outras layers dentro da paleta de layers, vá em Filter> Artistic> Watercolor, defina o valor de Brush Details para 12 pixels, Shadow Intensity em 0 e Texture em 3, pressione Ok, mude o modo de blend da layer para Luminosity e defina a opacidade em 25%.



12. Vá em Layer> New Adjustment Layer> Levels e defina os valores de 9, 1.07 e 203 para o Input Levels, pressione Ok e ao final sua imagem estará como na foto abaixo.




Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.


Até a próxima!!

Postado por Fernando Schimit - Fox Creative
[...]

Categories: ,
Comments


Posted on the outubro 23rd, 2009 under Jquery by Renan Lima
1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Tabbed Interface ou Tabbed estrutura do menu esta realmente ficando famoso em web design e desenvolvimento. Este tutorial irá mostrar-lhe como construir sua própria interface de abas usando jQuery com slideDown / slideUp efeito. Certifique-se de verificar o demo, você definitivamente vai gostar.
Preview || Download
2. Animated Menus Using jQuery
Aprenda a criar este menu com um efeito surpreendente em animação usando apenasXHTML simples, CSS e Javascript semelhante ao Dragon Interactive (dragoninteractive.com).
PS: Testei e este menu não funcionou corretamento no ie6… D:
Preview || Download
3.Create a Cool Animated Navigation with CSS and jQuery

Animação e feedback visual são ótimas maneiras de ajudar o usuário a navegar e interagir com um website. Embora tradicionalmente Adobe Flash foi e é, a opção para quem quer animar algum websites, mas também tem seus contratempos na questão otimização (SEO)… Esta é uma alternativa para quem quer evitar o Flash totalmente.
Preview || Download
4.jQuery ListNav Plugin
Este plugin jQuery fornece uma maneira fácil de adicionar uma discreta carta baseada widget de navegação para qualquer lista UL ou OL. Facilmente estilizados (via CSS) a barra de navegação aparece acima da lista, mostrando ao usuário as letras de A-a-Z. Clicar em uma das letras da lista de filtros para mostrar apenas os itens na lista que começam com essa letra. Pairando sobre uma carta (opcionalmente) mostra uma contagem acima da carta, que indica quantos itens serão exibidos se que a carta é clicado. Outras opções dar-lhe o controle sobre a funcionalidade básica.
Preview || Download
5. jqDock menu
Transformar um conjunto de imagens em um Mac-like Dock menu horizontal ou vertical, com ícones que se expandem em capotamento, e os rótulos opcionais.
Preview || Download
6.Sliding Jquery Menu
Este tutorial explica como funciona um deslizamento de menu jquery e você pode ver o efeito em ação nas página PSDTuts no canto superior direito.
Preview || Download
7.CSS Sprites 2 – It’s JavaScript Time
Preview
8. CSS Mac Dock Menu
Se você é um grande fã do Mac, você vai adorar este menu dock CSS. Ela está usando biblioteca JQuery Javascript. Ele vem com dois estilos dock – superior e inferior. Este menu dock CSS é perfeita.
Preview || Download
9.Kwicks for jQuery
Kwicks para jQuery começou como uma porta do efeito Mootools insaciavelmente atrativo, mas evoluiu para um elemento altamente personalizável e versátil.
7 Examples || Download
10.Jquery File Tree
Preview || Download
11.Learning jQuery: Fading Menu – Replacing Content
Otimo tutorial do CSS-Tricks explicando como usar CSS com jQuery, desta vez ele ensina como usar jquery desaparecendo no menu de opções.
Preview || Download
12. How to Make a Smooth Animated Menu with jQuery
Já viu algumas navegação jQuery excelentes que deixou você com vontade de fazer uma de sua preferência? Este tutorial ensina como fazer isso através da construção de um menu e animá-lo com alguns efeitos suaves.
Preview || Download
13.Create Vimeo-like top navigation
Aprenda a criar uma navegação como no site do YouTube, qui é apenas XHTML, CSS.
Preview + Vimeo site || Download
14. jQuery (mb)Menu 2.3
Este é um componente jQuery poderoso para construir facilmente um menu com vários níveis ou um menu contextual (botão direito) de uma forma intuitiva!
Você pode adicionar submenus como você desejar, se o seu submenu ou menu não está declarado na página, o componente irá obtê-lo via ajax chamando o modelo de página com o id do menu que você precisa (o valor do “menu” atributo) Página ajax deve retornar um código bem formatado como no exemplo abaixo.
Preview || Download
15. Coda Slider
Preview || Download
16. jQuery idTabs
idTabs é um plugin para jQuery. Ele faz a adição de guias em um site super simples. Mas também pode abrir a porta para infinitas possibilidades.
Preview || Download
17. Create a Slick Tabbed Content Area using CSS & jQuery
Um dos maiores desafios para os designers da web é encontrar maneiras de colocar um monte de informações em uma página sem perder a usabilidade. Guias de conteúdo é uma ótima maneira de lidar com esta questão e tem sido amplamente utilizada em blogs recentemente. Isso é ótimo tutorial explicando para construir uma caixa de informação simples com guias em HTML, em seguida, fazê-lo funcionar usando algum Javascript simples, e então finalmente conseguir a mesma coisa usando a biblioteca jQuery.
Preview
18. LavaLamp for jQuery lovers!
Preview || Download
19. Animated Drop Down Menu with jQuery
Drop down menus são uma maneira realmente conveniente para colocar um menu grande em um espaço muito pequeno. Por muito tempo as pessoas têm usado apenas um elemento de formulário padrão para queda dos menus, mas com um esforço mínimo você pode criar um efeito muito mais interessante usando jQuery e CSS.
Preview || Download
20. Using jQuery for Background Image Animations
Cinco maneiras diferentes de criar animações de fundo da imagem com Jquery.
Preview
21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
Como você sabe, há uma série de concorrentes nas bibliotecas javascript em torno destes dias. Apesar de eu preferir o jQuery, eu sempre gostei da forma como o menu MooTools funcionou. Portanto, neste tutorial vamos recriar esse mesmo efeito … mas isso será feito em jQuery!
Preview || Download
22. Menumatic Mootools
Preview Vertical || Preview horizontal || Download
23. jQuery convertion: Garagedoor effect using Javascript
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
Preview || Download
24. Perspective tabs
Perspective tabs é uma simples Mootools 1,2 plug-in que permite um número lagre de guias para caber em um espaço pequeno.
25. Fisheye Menu
Fisheye Menu é um menu de expansão com base no doc MacOSX.
Download
Fonte: http://blog.pixelfont.com.br


Postado por Fernando Schimit - Fox Creative
[...]

Categories:
Comments


Created by Martin Angelov on Sep 10th, 2009

Introduction

One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project.
Today we are going to build a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in.
There is no need to download the plug-in – I’ve included it in the demo files, so grab them and get on reading.

The XHTML

We start off with our XHTML front-end.

demo.php

01<div id="container">
02 
03<div id="heading">
04<h1>A cool jQuery galleryh1>
05div>
06<div id="gallery">
07 
08php
09//our php code goes here
10?>
11 
12<div class="clear">div>
13div>
14 
15<div id="footer">
16div>
17 
18div>
And that is basically all there is to it. Note the highlighted area – this is where we put our PHP code, that will generate the gallery images. Now lets go through how this is done.

The PHP

The idea is simple – our PHP back-end is going to scan a folder that we’ve set up with our gallery images, and turn it into a fancy CSS & jQuery gallery. The great thing about this strategy is that it is incredibly easy to set up a gallery, and adding images to an existing one is a charm – just dump them in the gallery’s directory via FTP and it is ready to go.

demo.php

01$directory = 'gallery'; //where the gallery images are located
02 
03$allowed_types=array('jpg','jpeg','gif','png'); //allowed image types
04 
05$file_parts=array();
06$ext='';
07$title='';
08$i=0;
09 
10//try to open the directory
11$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
12 
13while ($file = readdir($dir_handle))    //traverse through the files
14{
15    if($file=='.' || $file == '..') continue;   //skip links to the current and parent directories
16 
17    $file_parts = explode('.',$file);   //split the file name and put each part in an array
18    $ext = strtolower(array_pop($file_parts));  //the last element is the extension
19 
20    $title = implode('.',$file_parts);  //once the extension has been popped out, all that is left is the file name
21    $title = htmlspecialchars($title);  //make the filename html-safe to prevent potential security issues
22 
23    $nomargin='';
24    if(in_array($ext,$allowed_types))   //if the extension is an allowable type
25    {
26        if(($i+1)%4==0) $nomargin='nomargin';   //the last image on the row is assigned the CSS class "nomargin"
27        echo '
28        
class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">
30        ';
31 
32        $i++;   //increment the image counter
33    }
34}
35 
36closedir($dir_handle);  //close the directory
By traversing through the files in the directory and skipping the non-image files, we output some XHTML code for every image . This code (lines 28-39) consists of a div container, with a CSS class pic (and in some cases a nomargin, more on that later), and we set its background to the image file via the style attribute. We position the image in the center of the background by specifying its position to be 50% 50%. This centers it both horizontally and vertically and thus shows  only the middle part, that fits into the div container’s size. This creates a nice thumbnail, with no need of actually resizing the image.
This works best with images with smaller resolutions, so you should consider resizing those 10 megapixel photos before uploading them.
The div contains a hyperlink which is linked to the image and has a title of the image filename. Both these attributes are used by the lightBox plugin to generate the lightbox gallery. So by renaming the file, you can change the caption that shows under it.
You may wonder what is the point of that nomargin class? Every image in the gallery has a right and a bottom margin. But this means that it is not possible the last element of each row to align with the right part of the heading div and it looks amateurish. So we assign this special class, which clears the right margin for the last element on each row and gives us a proper alignment.
The jQuery Gallery
The jQuery Gallery

The CSS

Everything is set up, but we still have to give it that cool look.

demo.css

01/* first reset some of the elements for browser compatibility */
02body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
03    margin:0px;
04    padding:0px;
05    font-family:Arial, Helvetica, sans-serif;
06}
07 
08body{   /* style the body */
09    margin-top:20px;
10    color:white;
11    font-size:13px;
12    background-color:#222222;
13}
14 
15.clear{ /* the clearfix class */
16    clear:both;
17}
18 
19a, a:visited {  /* a:visited is needed so it works properly in IE6 */
20    color:#00BBFF;
21    text-decoration:none;
22    outline:none;
23}
24 
25a:hover{    /* the hover effect */
26    text-decoration:underline;
27}
28 
29#container{ /* the main container div */
30    width:890px;
31    margin:20px auto;
32}
33 
34#heading,#footer{   /* the header and the footer share some of their style rules */
35    background-color:#2A2A2A;
36    border:1px solid #444444;
37    height:20px;
38    padding:6px 0 25px 15px;
39    margin-bottom:30px;
40    overflow:hidden;
41}
42 
43#footer{    /* ..but not all */
44    height:10px;
45    margin:20px 0 20px 0;
46    padding:6px 0 11px 15px;
47}
48 
49div.nomargin{   /* our special nomargin class */
50    margin-right:0px;
51}
52 
53.pic{   /* divs that hold all the pictures in the gallery */
54    float:left;
55    margin:0 15px 15px 0;
56    border:5px solid white;
57    width:200px;
58    height:250px;
59}
60 
61.pic a{ /* in every .pic container there is a hyperlink exactly the size of the container */
62    width:200px;
63    height:250px;
64    text-indent:-99999px;
65    display:block/* don't forget that widths and heights of hyperlinks are useless without display:block */
66}
67 
68h1{ /* style the heading */
69    font-size:28px;
70    font-weight:bold;
71    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
72}
73 
74h2{ /* the footer text */
75    font-weight:normal;
76    font-size:14px;
77    color:white;
78}

The jQuery

To make it all tick, we need to include the jQuery java script library in our page, and add the lightBox plugin. The following code was taken from the head section of demo.php:
1<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css">
2<link rel="stylesheet" type="text/css" href="demo.css" />
3 
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">script>
5<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js">script>
6<script type="text/javascript" src="script.js">script>
On line 1 we include the lightbox plugin’s CSS file, which styles the lightbox that displays the images. On line 2 we include our own CSS file.
Line 4 is where we include the jQuery library from Google’s CDN. Later come the lightbox plugin itself and our own script.js file.
Now we are ready to put the finishing touch.

script.js

01// after the page has finished loading
02$(document).ready(function(){
03 
04    $('.pic a').lightBox({
05    // we call the lightbox method, and convert all the hyperlinks in the .pic container into a lightbox gallery
06 
07        imageLoading: 'lightbox/images/loading.gif',
08        imageBtnClose: 'lightbox/images/close.gif',
09        imageBtnPrev: 'lightbox/images/prev.gif',
10        imageBtnNext: 'lightbox/images/next.gif'
11 
12    });
13 
14});
The lighbox() method takes an object as an optional parameter. The only reason we provide any parameters is that I changed the default location of the plugin, putting it in a subfolder /lightbox which aids for a cleaner file structure. Unfortunately the images that the plug-in uses become inaccessible and have to be provided manually.
With this our gallery is complete.

Conclusion


Postado por Fernando Schimit - Fox Creative
[...]

Categories: ,