Ralph Almeida - SEO, Otimização, Design http://www.ralphalmeida.com SEO, SEM, Design, etc Mon, 01 Aug 2011 14:13:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Auto reload CSS: Reload automático dos arquivos CSS do seu site! http://www.ralphalmeida.com/2011/08/01/auto-reload-css/ http://www.ralphalmeida.com/2011/08/01/auto-reload-css/#comments Mon, 01 Aug 2011 14:12:50 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=228 Vai aí uma dica bem útil pra quem trabalha com desenvolvimento de websites e aplicações web: reload automático dos arquivos CSS.

Pra quem trabalha com dois monitores, que é meu caso, é melhor ainda. Em um monitor eu deixo o site aberto e no outro meu editor CSS. Assim quando eu altero uma informação, o site ao lado já atualiza automagicamente, sem precisar ficar dando F5 a cada modificação de cores, fontes, margens, etc.

Os passos são o seguinte;

1) Faça o download desse arquivo JS css_auto-reload.js e inclua no cabeçalho de seu site:

<script type=”text/javascript” src=”css_auto-reload.js”></script>

2) Chame a função na tag <BODY> de seu site:
<body onLoad=”javascript:(document.styleSheets.start_autoreload(2000))”>

Nesse exemplo o reload acontecerá a cada 2 segundos. Para modificar esse tempo, basta mudar o valor que no caso está em 2000 milissegundos.
Pronto, agora você pode trabalhar com mais rapidez e eficiência =)
]]> http://www.ralphalmeida.com/2011/08/01/auto-reload-css/feed/ 0 Dica de Photoshop: Bordas perfeitas com as ferramentas Rectangle e Rounded Rectangle http://www.ralphalmeida.com/2010/08/30/dica-de-photoshop-bordas-perfeitas-com-as-ferramentas-rectangle-e-rounded-rectangle/ http://www.ralphalmeida.com/2010/08/30/dica-de-photoshop-bordas-perfeitas-com-as-ferramentas-rectangle-e-rounded-rectangle/#comments Mon, 30 Aug 2010 20:43:49 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=201 Um problema que eu sempre encontrava ao desenhar retângulos no Photoshop era as malditas bordas embaçadas que apareciam quando os pixels não se encaixavam corretamente com a grid de pixels.

Aí eu sempre dava um mega zoom na área embaçada e ajustava a largura e altura corretamente até conseguir eliminar esse efeito.

Até que encontrei hoje um post super interessante nesse site (Bjango) e descobri a salvação para esse tipo de problema.

Infelizmente, desenhar objetos no Photoshop com os pixels exatamente na grid line é muito difícil, com isso o objeto fica com a aparência de bordas embaçadas, conforme imagem acima. Com essa dica, vamos desenhar quadrados e retângulos com os pixels perfeitamente encaixados.

A dica é rápida e simples, basta escolher a ferramenta para desenhar retângulose ir lá em cima na barra de opções das ferramentas e selecionar a opção SNAP TO PIXELS. Pronto!

Agora seus retângulos (com ou sem bordas redondas) ficarão lindos como a imagem abaixo.

O resultado sairá perfeito sempre, pois agora o objeto será desenhado alinhado sempre à grid de pixels.

O único problema é se você desejar modificar o tamanho do seu objeto., pois dessa forma os pixels não serão alinhados a grid automaticamente, tornando as bordas embaçadas.

Antes de escrever esse post, eu nunca tinha ouvido falar dessa opção, e sempre perdia muito tempo ajustando as bordas dos objetos. Creio que essa dica vai me ajudar muito e pode ajudar vocês também que trabalham com Photoshop. Testei essa opção no Photoshop CS4 & CS5 no Mac e no PC e ambos funcionaram corretamente.

]]> http://www.ralphalmeida.com/2010/08/30/dica-de-photoshop-bordas-perfeitas-com-as-ferramentas-rectangle-e-rounded-rectangle/feed/ 2 Ótimos efeitos de transição de imagens em jQuery : Coin Slider http://www.ralphalmeida.com/2010/08/30/otimos-efeitos-de-transicao-de-imagens-em-jquery-coin-slider/ http://www.ralphalmeida.com/2010/08/30/otimos-efeitos-de-transicao-de-imagens-em-jquery-coin-slider/#comments Mon, 30 Aug 2010 19:57:21 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=192 Navegando na internet, encontrei um site de um designer, russo se eu nao me engano, onde ele mostrava as imagens de seu portfólio com um lindo efeito de transição de imagens, que eu achava ser em flash.
Curioso ao ver que não era Flash, entrei no código fonte e encontrei a mágica: jQuery!

jQuery é uma biblioteca feita em JavaScript que é o bambambam dos webdesigners atualmente. Possui excelentes recursos que deixam seu site super atraente e sem deixar pesado como sites em Flash.

O nome do plugin é Coin Slider, e eu achei nesse site aqui, em inglês. Ótimo site por sinal, com vários post interessantes.

E como esse plugin foi útil pra mim, resolvi postar aqui no blog, que aliás está precisando de atualizações!

Então vamos ao que interessa.

Clique na imagem e veja uma página de demonstração do efeito.

Recursos

* Efeitos de transição únicos
* Compatível com Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
* Valid markup
* Configuração flexível
* Auto slide
* Barra de navegação
* Super leve (somente 8kb)
* Possibilidade de colocar links nas imagens
* Uso livre sob a licença do MI
* Totalmente customizável usando CSS

Download do plugin

Configuração

Faça o download do jQuery, do plugin Coin Slider e do arquivo CSS que está incluído no pacote do link acima e inclua tudo na seção <head> sua página:

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

Crie uma div com o id “coin-slider” e coloque as imagens, os links e as descrições, seguindo o modelo abaixo:

<div id=’coin-slider’>
<a href=”img01_url” target=”_blank”>
<img src=’img01.jpg’ >
<span>Descrição para a imagem 1</span>
</a>

<a href=”img02_url” target=”_blank”>
<img src=’img02.jpg’ ><span>Descrição para a imagem 2</span>
</a>
</div>

Pode colocar quantas imagens desejar, não tem limite. A descrição e o link não são obrigatórios.

No final do seu arquivo, antes do </body>, insira o código abaixo:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider();
});
</script>

Exemplo

Este plugin possui várias opções para você configurar seu slider do jeito que você quiser. Se você quiser um slide de largura 900px, sem botões de navegação e com intervalo de 5 segundos entre as imagens, o código é o seguinte:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>

Lista com todas as opções

width: 565, // largura do slider panel
height: 290, // altura do slider panel
spw: 7, // quadros por largura
sph: 5, // quadros por altura
delay: 3000, // intervalo de tempo entre as imagens, em milissegundos
sDelay: 30, // intervalo de tempo entre as imagens, em milissegundos
opacity: 0.7, // opacidade do título e da navegação
titleSpeed: 500, // velocidade de aparição do títuo em milissegundos
effect: ”, // random, swirl, rain, straight
navigation: true, // botões anterior e próximo
links : true, // mostrar links nas imagens
hoverPause: true // pausar a transição ao parar o mouse em cima da imagem

CUIDADO ao configurar o spw e sph porque se você colocar muitos quadros, a transição fica muito lenta e o site também. Aconteceu isso comigo! Então aconselho a não modificar os valores padrões.

Se você não setar o tipo de efeito, o padrão será random.

É isso aí, qualquer dúvida é só comentar.

]]> http://www.ralphalmeida.com/2010/08/30/otimos-efeitos-de-transicao-de-imagens-em-jquery-coin-slider/feed/ 66 Busca em tempo real do Google http://www.ralphalmeida.com/2010/08/27/busca-em-tempo-real-do-google/ http://www.ralphalmeida.com/2010/08/27/busca-em-tempo-real-do-google/#comments Fri, 27 Aug 2010 13:30:01 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=193 Acabei de ver que o Google lançou um serviço de busca em tempo real. Não sei quando ele lançou, mas descobri hoje =)

Nesse vídeo explicativo que eles lançaram no YouTube você vê com detalhes como funciona:

Você faz a busca e o Google vai atualizando automaticamente de acordo com novos resultados, buscando de diversas fontes de informação, como Twitter, Buzz, WordPress, Facebook, Blogspot e vários outros.

Após realizada a busca, dá pra filtrar pelo horário da notícia, através de um gráfico no topo da página.

Serviço interessante e pelo visto, algo que os demais buscadores vão ter que incorporar em seus resultados daqui pra frente.

Link pra página do Google Realtime: www.google.com/realtime

]]> http://www.ralphalmeida.com/2010/08/27/busca-em-tempo-real-do-google/feed/ 1 Vídeo de 11 anos do Google em 2 minutos http://www.ralphalmeida.com/2009/10/28/video-de-11-anos-do-google-em-2-minutos/ http://www.ralphalmeida.com/2009/10/28/video-de-11-anos-do-google-em-2-minutos/#comments Wed, 28 Oct 2009 17:09:48 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=188 O time do escritório do Google na Inglaterra fez esse vídeo abaixo que mostra uma rápida história da evolução do Google e os produtos lançados.

“De Stanford para Mountain View e o resto do mundo, com diversos produtos diferentes, começando com o Google Search até o Google Wave, StreetView e Chrome.”

11 anos do Google em 2 minutos

]]> http://www.ralphalmeida.com/2009/10/28/video-de-11-anos-do-google-em-2-minutos/feed/ 0 53 Técnicas de CSS que você não pode viver sem conhecer http://www.ralphalmeida.com/2009/09/30/53-tecnicas-de-css-que-voce-nao-pode-viver-sem/ http://www.ralphalmeida.com/2009/09/30/53-tecnicas-de-css-que-voce-nao-pode-viver-sem/#comments Wed, 30 Sep 2009 14:24:20 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=181 O CSS vem se difundindo cada vez mais entre os desenvolvedores web. Na primeira vez que aprendi, juro que pensei: “Que coisa inútil” mas hoje não consigo fazer nada na web sem utilizar CSS. Desenvolver em CSS oferece diversas vantagens, como fazer um site completamente sem tabelas, o que já é uma boa otimização pros buscadores (SEO), e o mais importante é que separa o layout da programação e da informação do site, tornando muito mais fácil a modificação de temas e layout de uma página.

Eu sempre vejo inúmeros artigos sobre CSS, e até indico um ótimo site que inclusive, é do professor da empresa onde aprendi realmente o início do CSS e a utilizar Tableless, o site Tableless.

E como o CSS chegou para ajudar, mostro abaixo 53 técnicas de CSS muito boas e que facilitam bastante a vida de qualquer desenvolvedor. Achado no Smashing Magazine, um dos melhores sites de design que conheço.

1. Menu em CSS

CSS-Technique

2. Navegação Matrix Reloaded

CSS-Technique

3. Abas em CSS

CSS-Technique

4. Gráfico de Barras em CSS (CSS For Bar Graphs)

CSS-Technique

5. Tabelas que se abrem

CSS-Technique

6. Método Adams de customização de Radio e Checkbox

CSS-Technique

7. CSS Image Replacement

CSS-Technique

8. Sombras com CSS (CSS Shadows Roundup)

CSS-Technique

9. Cantos redondos em CSS (Nifty Corners)

CSS-Technique

10. Drop Cap – Letras iniciais maiores em CSS

CSS-Technique

11. Definir opacidade da imagem com CSS

CSS-Technique

12. Como criar um efeito HOVER numa lista de blocos de links

CSS-Technique

13. Citações em CSS (Citações automáticas com JavaScript e CSS)

CSS-Technique

14. Diagramas em CSS

CSS-Technique

15. Curvas com CSS

CSS-Technique

16. Footer Stick permite que o rodapé da página apareça tanto no final da janela do browser como no final do conteúdo da página.

CSS-Technique

17. CSS Image Map

CSS-Technique

18. CSS Image Pop-Up

CSS-Technique

19. CSS Image Preloader

CSS-Technique

20. CSS Image Replacement para botões

CSS-Technique

21. Thumbnail para links

CSS-Technique

22. CSS Map Pop

CSS-Technique

23. Troca de folha de estilo baseada em PHP

CSS-Technique

24. Calendário CSS com lista não ordenada (CSS Styled Calender)

CSS-Technique

25. Técnicas de formulários em CSS

CSS-Technique

26. Técnicas de tabelas em CSS:

CSS-Technique

27. Imprimindo documentos Web em CSS

CSS-Technique

28. Melhorando o design de como os links são mostrados para impressão com CSS

CSS-Technique

29. Botões Submit em CSS

CSS-Technique

30. CSS Teaser Box

CSS-Technique

31. Dicas de marcadores personalizados em CSS

CSS-Technique

32. Ticked Off Links Reloaded

CSS-Technique

33. Zoom com CSS

CSS-Technique

34. Criando uma votação com estrelas usando CSS

CSS-Technique

35. Modos de estilizar links visitados

CSS-Technique

36. Estilizando links para arquivos PDF, ZIP, DOC

CSS-Technique

37. Displaying Percentages with CSS

CSS-Technique

38. Image Floats sem moldar o texto

CSS-Technique

39. Deixe o visitante escolher se quer abrir o link em uma nova janela

CSS-Technique

40. Acessando links externos facilmente

CSS-Technique

41. Tabela zebrada com JavaScript e CSS

CSS-Technique

42. Alinhamento central com CSS (Horizontal e Vertical)CSS-Technique

43. Notas de páginas não intrusivas

CSS-Technique

44. Legenda de imagens com CSS (Styled Images com legenda)

CSS-Technique

45. Gráfico de torta dinâmico com CSS

CSS-Technique

46. Notas de rodapé  com CSS

CSS-Technique

47. Sitemaps hierárquicos com CSS

CSS-Technique

48. Snook’s Resizable Underlines

CSS-Technique

49. Switchy McLayout: Técnica de adaptação de layoutCSS-Technique

50. StyleMap: CSS+HTML Visual Sitemap

CSS-Technique

51. Tamanho personalizado de leitura

CSS-Technique

52. Mensagem de alerta em CSS

CSS-Technique

53. CSS Production Notes

CSS-Technique

]]> http://www.ralphalmeida.com/2009/09/30/53-tecnicas-de-css-que-voce-nao-pode-viver-sem/feed/ 3 Pacote de ícones grátis: Vaga http://www.ralphalmeida.com/2009/09/29/pacote-de-icones-gratis-vaga/ http://www.ralphalmeida.com/2009/09/29/pacote-de-icones-gratis-vaga/#comments Tue, 29 Sep 2009 15:10:57 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=141 Icon set: vaga

Icon set: vaga

Set de ícones grátis com layout simples e moderno, composto de 60 arquivos PNG transparentes.

Faça o download dos ícones

]]> http://www.ralphalmeida.com/2009/09/29/pacote-de-icones-gratis-vaga/feed/ 0 Como as crianças aprenderão o alfabeto http://www.ralphalmeida.com/2008/07/10/como-as-criancas-aprenderao-o-alfabeto/ http://www.ralphalmeida.com/2008/07/10/como-as-criancas-aprenderao-o-alfabeto/#comments Thu, 10 Jul 2008 12:21:05 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=134 Excelente imagem que achei no Smokingpot.org e tive que copiar!

]]> http://www.ralphalmeida.com/2008/07/10/como-as-criancas-aprenderao-o-alfabeto/feed/ 3 Doodle dos 100 anos da Imigração Japonesa http://www.ralphalmeida.com/2008/06/18/doodle-dos-100-anos-da-imigracao-japonesa/ http://www.ralphalmeida.com/2008/06/18/doodle-dos-100-anos-da-imigracao-japonesa/#comments Wed, 18 Jun 2008 15:02:55 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=133 O Google comemora hoje os 100 anos da Imigração Japonesa com um Doodle especial, onde mostra um mapa mundi e um caminho traçado entre o Brasil e o Japão.

“A imigração japonesa no Brasil começou no início do século XX, como um acordo entre o governo japonês e o brasileiro. O Brasil abriga a maior população japonesa fora do Japão. São cerca de 1,5 milhão de pessoas.[1] O uso do termo nikkei é, atualmente, usado para denominar os japoneses e seus descendentes.” (Wikipedia)

]]> http://www.ralphalmeida.com/2008/06/18/doodle-dos-100-anos-da-imigracao-japonesa/feed/ 2 Preço do iPhone 3G no Brasil ficará próximo ao dos EUA, porém… http://www.ralphalmeida.com/2008/06/12/preco-do-iphone-3g-no-brasil-ficara-proximo-ao-dos-eua-porem/ http://www.ralphalmeida.com/2008/06/12/preco-do-iphone-3g-no-brasil-ficara-proximo-ao-dos-eua-porem/#comments Thu, 12 Jun 2008 13:25:47 +0000 Ralph Almeida http://www.ralphalmeida.com/?p=128 Segundo uma matéria que li hoje na Folha Online, o preço do novo iPhone na versão 3G, que será lançado dia 11 de Julho (no Brasil só lá em Setembro), deverá ser parecido com o preço de lançamento nos EUA, convertido em reais e com os impostos incluídos, logicamente.

Os preços anunciados pela Apple nos EUA são US$ 199 na versão com 8 Gb e US$ US$ 299 para 16 Gb.

O anúncio que li há algum tempo seria de que a Claro seria a primeira a vender o iPhone aqui no Brasil, porém já li que a Vivo também venderá. A diferença de preço do aparelho, provocada principalmente pelos impostos de importação, será bancada pelas operadoras da Telefónica em 15 países, 11 deles na América Latina, incluindo o Brasil.


Steve Jobs riiiindo, só pensando no quanto a Apple vai lucrar com esse novo iPhone 3G

 
Até acredito que a Vivo vá vender o iPhone 3G com um preço razoável, porém atrelado a um contrato mínimo de alguns anos e um valor super alto pela mensalidade, igualmente nos EUA, onde a AT&T vende por esse preço mas com um contrato mínimo de 2 anos.

Ou seja, o valor do telefone será em tese parcelado pelas dezenas de prestações que teremos que pagar pelo serviço.

Concluindo, se a Vivo vender o iPhone por, digamos, R$ 500 (o que eu acho quase impossível), ela vai nos obrigar a fazer um contrato de 1 a 2 anos de pelo menos uns R$ 300 por mês. É aí que eles ganham, na venda do serviço, e não dos aparelhos. Mas como estamos no Brasil, em breve eu compro o meu desbloqueado e sem contrato com ninguém, aí depois eu fecho um plano de dados com a operadora que eu quiser!

]]> http://www.ralphalmeida.com/2008/06/12/preco-do-iphone-3g-no-brasil-ficara-proximo-ao-dos-eua-porem/feed/ 1