Olá! Meu nome é Paty e sou a Garota QUE AMA Criatividade! Clique aqui e saiba mais sobre mim e a história do GC e de sua atual versão!
@
• Continuando a série com blogueiros convidados, hoje você vê a contribuição da Bárbara respondendo a pergunta “O que você viu de mais criativo nos últimos tempos?”
Fiquei feliz demais por receber um convite da minha querida musa Paty pra escrever um artigo para o Garota Criatividade. Poder ter um artigo meu falando sobre coisas que gosto num blog que é tão referência pra mim é algo único, e não podia deixar de aceitar. Antes de mais nada, obrigada Paty querida!!!
Não sou perita ou “formada” na área de desenvolvimento pra poder criar algo mais técnico ou fundamentado ao falar desse tema, mas tenho o gosto por coisas bem feitas, e se tem algo que me agrada muito é um site ou blog bem codificado. Fala-se muito do design da página, elementos visuais e afins, mas o que me agrada muito é o conjunto da obra. O resultado final de um site, tanto na parte visual quanto por trás das cortinas, que seria o código propriamente dito. Como ele interage com esses elementos e a experiência que proporciona para o visitante. Por isso, resolvi falar sobre isso, pois passo horas admirando uma página bem feita!
Como usuária, eu prezo por sites simples de se navegar, com elementos chamativos mas ao mesmo tempo acessíveis. Acessibilidade é tudo, e hoje é o item que mais valorizo, não só na web, mas na vida em geral. Uma bela forma de saber se um site é ou não acessível é pedir para uma pessoa que não está habituada com a web navegar em uma determinada página aleatóriamente. Fiz essa experiência recentemente com minha mãe e obtive bons resultados e críticas altamente produtivas. Ela apontou coisas que dificultavam a navegação e hoje meu blog é baseado 80% na impressão dela. Se está fácil para ela navegar, está fácil para meus visitantes também. A cereja do bolo foi no final das modificações ela falar “além de fácil de mexer, seu site está muito bonito”!
Não tenho um padrão específico do que me agrada mais, como cores, disposição de elementos e afins, mas valorizo muito designs minimalistas, fontes diferenciadas, objetos posicionados de forma nada convencional. Selecionei alguns exemplos para ilustrar este artigo:
O Idea Fixa é uma revista voltada para a inspiração visual, e sua página não podia ser nada menos do que absolutamente inspirante. O blog tem todos os elementos em harmonia, cores contrastantes, a navegação é simplificada e visualmente agradável. Não canso de admirá-lo!
O Subtraction é o blog do Khoi Vinh, diretor de arte do site nytimes.com e pioneiro no uso de layouts baseados em grids. O visual é absolutamente minimalista, mas totalmente simples de se navegar. Todos os elementos estão em absoluta harmonia, tanto na tipografia, cores, imagens e outros itens.
Sempre quis fazer um layout para meus blogs semelhante ao Erratic Wisdom. A combinação preto+branco+amarelo e padrões comuns me agrada demais. A parte tipográfica dos títulos, a barra lateral que pode ser escondida ou revelada é incrível, mas o que mais me chama a atenção nessa página é a criatividade de disposição dos arquivos, no rodapé. Algo totalmente inovador mas ao mesmo tempo prático, elegante e super criativo! Uma das páginas mais bonitas que já vi até então.
A Jujuqui é alguém que me surpreende sempre! Toda vez que ela fala que vai mudar o layout do blog tenho um pouco de receio, porque sempre acho que ela não pode se superar mais, porém sempre inova! Ela é extremamente criativa e não se prende à tendências ou ao mais do mesmo. Sempre varia nas cores, no estilo do blog, enfim… Navegar no Play Stop é uma experiência muito bacana! Recomendo ver o Portfolio da moça e ver as versões anteriores do blog!
Eu poderia citar um monte de outros exemplos, mas ocuparia muito do blog da Paty falando sobre. No entanto como eu disse antes, acho mais importante que a página seja acessível do que apenas agradável visualmente. Quando o designer/programador consegue chegar na harmonia de ambos os aspectos a página se torna um espetáculo à parte!
Espero que tenham gostado dos exemplos! E agradeço à Paty mais uma vez pelo convite mais do que honroso!
Bárbara Vaz, vendedora, entusiasta web e apaixonada por WordPress.
• Aproveite e clique aqui para visitar o blog da Bárbara, que é o MÁXIMO!
Olá pessoal, tudo bem?
Há algum tempo eu fiz esse tutorial: Plugin pra WordPress – Galeria de Imagens lado a lado. Esse post é uma continuação desse tutorial.
Um exemplo prático do que eu queria fazer: Eu utilizo o plugin Galeria pra mostrar as imagens no site OLHAR 43, só que cada post exibe muitas imagens ao mesmo tempo, carregando excessivamente a página inicial… Foi aí que surgiu a ideia de mostrar apenas algumas imagens daquela galeria e pedir pro visitante clicar caso quisesse ver o restante.
Para não fazer isso manualmente, utilizei uma solução do próprio WordPress: Custom Fields.
Quem precisar de solução parecida, é só acompanhar:
1. Primeiramente adicionei 5 novos campos: amostra1, amostra2, amostra3, amostra4, amostra5.
Quem nunca lidou com Custom Fields antes, para criar um campo basta entrar na página de adicionar novo post do WP e procurar a área do Custom Fields. Na minha versão é assim:
(Minha versão está em inglês). Para criar basta clicar em ‘Enter new’ colocar o nome do campo abaixo de ‘Name’ e o conteúdo do campo abaixo de ‘Value’, depois clica em ‘Add Custom Field’. Uma vez criado, o campo ficará sempre disponível nessa mesma área quando for adicionar um novo post.
2. Coloquei em cada campo ‘amostra1′ até ‘amostra5′ a URL da imagem que gostaria que aparecesse na página inicial como ‘amostra’ daquele post. Exemplo:
3. Hora de trabalhar no template. Mudei o index.php e o archive.php com o código a seguir. Primeiro procurei pelo the_content no theme e adicionei o código no lugar:
$amostra1 = get_post_meta($post->ID, ‘amostra1′, true);
$amostra2 = get_post_meta($post->ID, ‘amostra2′, true);
$amostra3 = get_post_meta($post->ID, ‘amostra3′, true);
$amostra4 = get_post_meta($post->ID, ‘amostra4′, true);
$amostra5 = get_post_meta($post->ID, ‘amostra5′, true);
echo(‘<center>’);
if($amostra1){ echo(‘<img src=’.$amostra1.’> ‘); }
if($amostra2){ echo(‘<img src=’.$amostra2.’> ‘); }
if($amostra3){ echo(‘<img src=’.$amostra3.’> ‘); }
if($amostra4){ echo(‘<img src=’.$amostra4.’> ‘); }
if($amostra5){ echo(‘<img src=’.$amostra5.’> ‘); }
echo(‘</center>’);
the_content(‘<center>-> [Clique aqui para ver o restante] <-</center>’);
?>
Esse código procurará no post adicionado se existe cadastro do custom field amostra, se existir, ele mostra as imagens configuradas como amostra e depois o link ‘Clique aqui para ver o restante do post’.
4. No post insiro a chamada pro plugin galeria normalmente, mas depois do código more, ficando assim:
<!–more–>
<? galeria(’15′,’http://meusite.com/imagens/’);
?>
Se você não sabe o que o plugin galeria faz, leia direto no outro post clicando aqui.
Para ver as ‘imagens de amostra’ funcionando, basta acessar o OLHAR 43.
Programei esse plugin quando procurava uma solução rápida e prática pra montar uma galeria de imagens com as miniaturas lado a lado + barra de rolagem horizontal, exatamente como essa:
 |
 |
 |
 |
 |
O plugin é esse:
/*
Plugin Name: Galeria
Plugin URI: http://garotacriatividade.com
Description: Monta uma galeria de acordo com os parametros passados
Version: 1
Author: Paty Pegorin
Author URI: http://patypegorin.com
*/
function galeria($fotos,$diretorio) {
echo(‘<center><div id=galeria_fotos>’);
$e=1;
echo(‘<table><tr>’);
while ($e <= $fotos) {
echo(‘<td><a href=’.$diretorio.$e.’.jpg rel="lightbox['.$diretorio.']"><img
src=’.$diretorio.$e.’_th.jpg border=0></a></td>’);
++$e;
}
echo(‘</tr></table>’);
echo(‘</div></center>’);
}
?>
Pra utilizar:
• Faça miniaturas das imagens. Eu uso o EasyThumbnails que é free e gera as miniaturas automaticamente da pasta que escolheu.
• Para abrir as imagens com o efeito do exemplo instale o Lightbox clicando aqui
• Código para inserir a galeria:
Onde:
• nº é o número de imagens que serão mostradas
• URL é a URL onde as imagens estão hospedadas
Exemplo:
A pasta fotos do exemplo deverá ter 10 imagens: as 5 miniaturas + as 5 imagens maiores.
Eu usei esse código CSS pra personalizar a galeria:
overflow: auto;
overflow-Y: hidden;
height:125px;
width:480px;
scrollbar-arrow-color: #a65506;
scrollbar-3dlight-color: #ff7e01;
scrollbar-darkshadow-color: #ff7e01;
scrollbar-face-color: #ffff00;
scrollbar-highlight-color: #ff7e01;
scrollbar-shadow-color: #ff7e01;
scrollbar-track-color: #ff7e01;
}
Simples, mas consegui o que queria! Bjito!
Se você utiliza o plugin Twitter Tools para twittar automaticamente em seu perfil no Twitter sempre que seu blog tem um post novo fique ligado nessa dica.
Descobri o vai.la, que cria um redirecionamento com uma URL bem curtinha e queria utilizá-lo em conjunto com o Twitter Tools, ao invés do bit.ly que é o sistema padrão do plugin.
Encontrei a forma abaixo:
1. Você precisa ter o plugin Twitter Tools instalado. Clique aqui pra acessar o site do desenvolvedor.
2. Abra o arquivo twitter-tools-bitly.php que estará provavelmente dentro da pasta wp-content/plugins/twitter-tools
3. Encontre a linha onde está o seguinte código:
4. Coloque antes dessa linha esse código:
$vaila = @fopen(‘http://vai.la/link/api/?url=’.$url,’r');
if ($vaila) {
$newurl = fread($vaila, 1024);
fclose($vaila);
$url=$newurl;
}
// vai.la END
E pronto. As URLs dos posts estarão no vai.la
Importante: Guarde o código em um arquivo do bloco de notas, pois pode precisar dele depois de atualizar o plugin com uma nova versão. Nesses casos todas as alterações manuais são perdidas.
Esse é um tutorial mega rápido apenas para dar início a categoria Tutoriais do blog e para disponibilizar a solução de um problema que me fez quebrar a cabeça por algumas horas:
Instalou WordPress na pasta principal do domínio e não consegue acessar as subpastas não-relacionadas ao WP? Eis a solução.
1. Abra o .htaccess que está localizado na pasta public_html
2. Ele será algo do tipo:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
2. Adicione essas duas linhas no começo do arquivo:
ErrorDocument 404 /404.html
3. Crie os arquivos 401.html (acesso não autorizado) e 404.html (página não encontrada) e hospede na pasta principal
4. Crie um outro .htaccess e coloque esse código nele:
5. Envie esse novo .htaccess para a subpasta não-relacionada ao WordPress que está tentando acessar e pronto. O problema sumirá.
Por que isso acontece?
Quando você tenta acessar seusite.com/subpasta o .htaccess gerado pelo WP tenta encontrar ‘subpasta’ entre os posts e páginas cadastrados no WordPress, não encontrando redireciona para a página de erro gerada pelo próprio WordPress.
Quando você realiza os passos acima ‘você’ informa que existe uma página de erro e que existe um index naquela subpasta, acabando com o problema.
• Esse post foi construído com base nessas instruções [clique] do Christopher Heng, que fez um tutorial para usuários do Drupal, mas que se encaixou muito bem nesse caso também.
