Coleção gratuita de ícones

07 / 01 / 2009   Blog Design, Design* comente esse artigo

Eu utilizo muito algumas coleções gratuitas de ícones, e não só porque não custam nada (isso ajuda :) ), mas também porque há trabalhos excelentes por aí. Eu mesmo já encomendei trabalho para um designer que disponibilizou um desses aperitivos. Sem a tal coleção eu provavelmente nunca o encontraria nos googles da vida. Ou seja, o grátis rendeu um trabalho remunerado.

Mas vamos à coleção de hoje. Esbarrei nela esses dias e gostei bastante. São 78 ícones limpos, simples e bastante elegantes, desenhados por Neurovit para a smashing magazine. Inclui as fontes (vetoriais), vem em .png e .ico na resolução de 128x128px.

Coleção Simplicio:

icones - simplicio

icones - simplicio

enviado por Marcos V.

Digg It! Digg It! Del.icio.us

WordPress: como converter categorias em tags e vice-versa

26 / 09 / 2008   Blog Design, Blogar* comente esse artigo

Eu já escrevi sobre as diferenças entre categorias e tags, por isso não vou entrar em detalhes sobre o que é taxonomia. O meu problema atual é que agora vou (finalmente!) migrar o Webcétera e outros blogs para o servidor da rede Kabunzo de blogs, e consequentemente mudar o host, que passará a ser webcetera.kabunzo.com. Nessas mudanças que tenho feito, já aproveito pra corrigir alguns problemas maiores dos blogs. E como dá pra imaginar, uma das grandes falhas do webcétera são as suas atuais 47 categorias, um absurdo sob qualquer critério. Como expliquei no post do link do começo, isso aconteceu porque sempre utilizei categorias como tags.

1. Transformando categorias em tags ou tags em categorias
Essa é a parte mais fácil da história, o WordPress traz uma ferramente para essa migração.

No seu Dashboard, vá em Manage > Import (Gerenciar > Importar) e cliquem em Categories and Tag Converter (Conversor de categorias e tags).

A tela seguinte mostra uma listagem das suas categorias, basta marcar as que deseja transformar em tags (ou marcar todas) e clicar no botão “Converter categorias em tags”. É só isso, as categorias marcadas agora são tags. Tome apenas cuidado para não deixar categorias órfãs. Um exemplo, se você possui uma hierarquia de categorias Pernambuco > Recife, e converter apenas Pernambuco, Recife ficará sem um pai. Por isso, planeje bem suas mudanças. Podem ser necessárias algumas alterações, como por exemplo mudar o pai de Recife.

Para fazer o oposto, cliquem em Tags to categories, selecione as tags e clique no botão de converter.

2. Evitando os links quebrados
Até agora tudo bem, mas restou um problema sério. Onde antes havia /category/pernambuco, agora existe um link quebrado. O melhor a fazer é construir uma regra de redirecionamento, assim, sempre que alguem for a /category/pernambuco, por exemplo, será naturalmente redirecionado para /tag/pernambuco.

Esse procedimento também é simples. Na raiz do seu blog há um arquivo .htaccess. Faça o download dele e abra em algum editor de textos, como o bloco de notas.

Localize as linha que começam com RewriteRule.
Para redirecionar apenas uma categoria, entre com uma linha como essa abaixo, trocando categoria1 pelo nome da categoria que deseja redirecionar:
RewriteRule ^category/(categoria1)(.*) tag/$1$2 [L,R=301]

Para mudar mais de uma categoria na mesma linha, separe os nomes com “|” (pipe):
RewriteRule ^category/(categoria1|categoria2)(.*)$ tag/$1$2 [L,R=301]

Se quiser mudar todas as categorias para tag, utilize a linha abaixo
RewriteRule ^category/(.*)$ tag/$1 [L,R=301]

Salve o arquivo e faça o upload para o seu blog. Pronto, suas categorias foram transformadas em tags e os links não foram perdidos.

enviado por Marcos V.

Digg It! Digg It! Del.icio.us

7 dicas para o design do seu blog

29 / 01 / 2008   Blog Design* comente esse artigo

puzzle.jpg

Eu ja escrevi que o design de um blog não é o mais importante, o que realmente gera visitação é o conteúdo. Isso não significa que não tenha a mínima importância, muito pelo contrário. Mesmo na época do RSS, é sempre melhor visitar um site que se leve em consideração o usuário. Aqui vão 7 dicas que certamente farão o seu blog melhor.

1. Faça um rascunho: eu faço em papel, como se fosse um diagrama de blocos. Está o principal lá. No caso de blogs, já tenho até um modelo pronto.

  • página principal
  • post sozinho
  • página das tags
  • sobre
  • contato
  • blogroll(s)

É o básico para começar um blog. Se quiser fazer uma estrutura com suas páginas, categorias, etc… tanto melhor. Escreva bastante no seu rascunho, faça anotações que podem parecer básicas agora, mas que você não irá se lembrar daqui 1 mês. Guarde isso. Se depois de um tempo achar que seu blog ficou confuso, volte ao rascunho original e veja onde desvirtuou-se.

Seja bastanto óbvio na hora de escolher os nomes das páginas que irá criar. Isso facilitará a sua vida, a experiência do internauta em seu site e dos mecanismos de busca.

2. Colunas estreitas: evite designs com a parte de leitura em uma coluna muito larga. Sites sem largura pré-fixada pode evoluir para o texto em bloco de 700, 800px. Péssimo para ler. Não é à toa que jornais e revistas impressos utilizam duas, três ou mais colunas por páginas. Facilita imensamente a leitura.

3. Mantenha as imagens leves: as imagens que fazem a composição da sua página (fundo, separadores, logo, etc…) devem ser o mais leve possível. Há um tempo “vazou” um documento do Google onde se determinava que as páginas mais visitadas deveriam carregar em menos de 2 segundos. Ninguém gosta de esperar por nada.

4. Teste com diferente browsers: a guerra dos browsers está aberta. Não faz sentido perder qualquer fatia de mercado simplesmente porque você foi preguiçoso e não testou com os navegadores mais utilizados (ie 7, ie 6, ff 1.5, ff 2.0, safari, etc…). -ahh, mas eu não vou me preocupar com o Konqueror e seus zero vírgula zero nada de mercado! Ok, mas deixar os 5% dos macs (safari) sem atendimento não faria sentido. Teste, no seu computador, no de um amigo, no do caixa da padaria, tanto faz. Procure uniformizar ao máximo a aparência do seu site.

5. Evite buracos: grandes espaços em branco (ou na cor de fundo) deixam uma sensação de algo inacabado. Nossa tendência é passar rapidamente pelo site, como se ali não fôssemos encontrar nada conclusivo.

6. Respeito o HTML: procure validar o seu html e css. Isso ajuda muito no item 4 e na manutenção com versões futuras de navegadores.

7. Indique o que há de bom: Coloque caixas com os melhores posts, últimos, comentários, etc… tudo o que puder entreter o internauta e mantê-lo navegando em seu blog. Procure também um plugin ou ferramente que indique os posts relacionados ao que o usuário está lendo.

enviado por Marcos V.

Digg It! Digg It! Del.icio.us

5 motivos para criar um favicon.ico

28 / 01 / 2008   Blog Design* 4 comentários

Ontem, acessando o google reader percebi que alteraram o favicon.ico. Não sei se fizeram isso ontem mesmo, talvez eu tenha deixado passar. Mas isso levanta uma questão importante: vale a pena personalizar o ícone do seu site/blog? A reposta é sim, e por alguns bons motivos.

webcetera-favicon2.png

  1. Crie uma marca: procure criar uma marca para o seu blog e, lógico, um logo. Se você não é um designer capacitado, como eu não sou, faça algo simples, pode ser uma letra – como aqui no webcétera – ou uma pequena imagem. Certifique-se de seja algo que faça as pessoas reconhecerem que se trata do seu site. Se tiver uns US$ 50,00 a US$ 100,00 no bolso, sugiro que contrate algum profissional para realizar o serviço, via de regra, vale o investimento.
  2. Destaque-se nos favoritos: atualmente todos os navegadores utilizam o favicon para marcar os favoritos, seja na barra, seja nos menus. Esse apóio visual facilita encontrar o link e pode te gerar um número maior de visitas.
  3. Barra de navegação: seu favicon também irá aparecer na barra de navegação, é sempre bom para o internauta saber que saiu ou entrou no seu site.
  4. Feeds: vários leitores de feeds adicionam ao lado dos posts ou listagem de feeds o favicon. É bem melhor que um ícone padrão ou a chatice de um espaço em branco. E, novamente, vale o mesmo apelo, uma imagem chama a atenção e pode gerar algumas leituras a mais. Tá, eu sei que o google reader não permite, mas esse é apenas um dos leitores de feeds.
  5. Porque é legal: se o seu blog é uma experiência pessoal, por não “personaliza-lo” um pouco mais?

Como criar um favicon

Essa é uma tarefa bastante simples, utilize o seu programa gráfico favorito e crie um arquivo com extensão png de 16×16 pixels. Em seguida, faça o download e instalação do png2ico, que possui versão para linux e windows. Esse é um programa de linha de comando, não possui interface gráfica, mas sua utilização é bastante simples. Abra um terminal (Janela de comando, no windows) e vá até o diretório onde gravou seu .png (com o comando cd, no windows, cd /dir1/dir2/ico, ou qualquer que seja o diretório) e digite o seguinte comando:

png2ico favicon.ico logo16x16.png

Substitua logo16x16.png pela imagem que você criou. É isso, agora basta enviar o favicon.ico para a raiz do seu site e pronto, todas as suas páginas estarão ligadas e ele.

Como personalizar o favicon de uma página

Se você quiser um favicon diferente para o seu blog ou qualquer outra página, em relação ao restante do site, adicione a seguinte linha no cabeçalho da página:

<head>(…)

<link rel=”shortcut icon” type=”image/ico” href=”/outrofavicon.ico” /><!– adicione esta linha substituindo /outrofavicon.ico pelo endereço do seu arquivo .ico –>

(…)</head>

Bastante simples, não?


                        

enviado por Marcos V.

Digg It! Digg It! Del.icio.us

Seu blog vive no passado?

17 / 01 / 2008   Blog Design* comente esse artigo

Acabei de ver no rodapé que esqueci de alterar o ano. O webcétera ainda está em 2007… pronto, não está mais. Eis o que fiz.

Onde havia “Vecom – 2007″ troquei por “Vecom – <?php echo date(“Y”); ?>”

Simples e prático, evitará esquecimentos em 2009. Utilizando a data do servidor o ano estará sempre “em dia”.

enviado por Marcos V.

Digg It! Digg It! Del.icio.us

Next Page »