As palestras sobre design responsivo na Campus Party 2013

12/02/2013 | Design Responsivo | | | |

Acompanhei ao vivo a palestra do Guilherme Serrano na Campus Party 6, “Responsive design e suas aplicações”.

Gostei bastante da palestra e não tenho muito a acrescentar sobre o assunto, o Guilherme já disse tudo em meia hora de conversa e eu concordo com o ponto de vista dele: design responsivo é a prova de futuro e deve ser feito sem jQuery, sem JavaScript, só com media queries. Assista o vídeo e acompanhe os slides pelo Slideshare:

Responsive design from Guilherme Serrano

* * *

Fuçando nos vídeos da Campus Party descobri depois a palestra Layouts Responsivos: o seu conteúdo em múltiplos dispositivos, com Bernard De Luna e Zeno Rocha. Coloco aqui o vídeo e os slides, mas no blog do Zeno tem um post complementando as referências, vale a visita.

Layouts Responsivos from Bernard De Luna
comente

Como mudar o link do rodapé no painel de administração do WordPress

06/02/2013 | WordPress | |

O painel de administração do WordPress traz uma mensagem no rodapé que diz “Obrigado por criar com o WordPress”, com um link que aponta para o wordpress.org. Se você entrega uma instalação personalizada para o próprio cliente fazer a atualização, talvez ele possa estranhar essa mensagem – apesar de não ser tão óbvia quanto o logotipo do WordPress no formulário de login.

Texto original no rodapé do WordPress no painel administrativo

Alterar esse texto do rodapé é tão simples que eu acho que vale a pena fazer isso pra qualquer cliente.

 
No arquivo functions.php do seu tema, inclua o seguinte trecho de código:

1
2
3
4
5
6
// Altera o texto do rodape do painel administrativo
 
function remove_footer_admin () {
    echo '© 2013 - Nome do Site';
}
add_filter('admin_footer_text', 'remove_footer_admin');

Texto personalizado no rodapé do WordPress no painel administrativo

 
Mais fácil ainda é colocar a tag do WordPress que retorna automaticamente o nome do blog; assim você pode reaproveitar o mesmo código em todos os temas que fizer.

1
2
3
4
5
6
// Altera o texto do rodape do painel administrativo
 
function remove_footer_admin () {
   echo bloginfo( 'name' );
}
add_filter('admin_footer_text', 'remove_footer_admin');

Texto personalizado no rodapé do WordPress no painel administrativo

Esse código foi testado para a versão atual do WordPress, que na publicação deste post é a 3.5.1.

Adaptado do Smashing Magazine

2 comentários

Links do mês (Janeiro 2013)

31/01/2013 | Links do mês |

Estes são artigos e posts interessantes que eu encontrei durante o mês de janeiro. Valem 10 minutinhos de leitura.

Vida de freelancer

Como lidar com os clientes que não pagam?
Tomar calote de cliente é uma coisa muito comum, infelizmente. Como lidar com isso? Um ótimo texto do Escola Freelancer.

Acessibilidade

Construindo tabelas acessíveis
É mais fácil construir tabelas acessíveis do que você imagina! Do Maujor, que é leitura obrigatória.

HTML e CSS

Quero aprender HTML. E agora?
Outra referência obrigatória para quem está começando no web design é o Pinceladas da Web.

15 CSS Tricks That Must Be Learned
Truques de CSS básicos mas extremamente úteis, do In The Woods.

comente

Campus Party Brasil 2013

30/01/2013 | Eventos | |

Open Source

Hoje estive pela primeira vez na Campus Party com o pessoal do trabalho, e foi uma experiência incrível. A gente acompanha o evento através das redes sociais e dos sites de notícia, mas quando estamos lá a dimensão é muito maior.

Pegamos o fim da discussão Open Source Technology and Platforms, e foi uma grande (e grata) surpresa ver o quanto a filosofia da Microsoft evoluiu em relação ao software livre. Acompanhei também a discussão sobre Comunicação Pública na Web (com participação do Ricardo Negrão da EBC) e o finzinho da discussão sobre Open Source na Globo.com. O workshop de Drupal estava bem interessante, mas o áudio estava muito baixo em relação ao som do evento ao lado, o que deixou o ambiente bem desconfortável. De qualquer jeito acabei não levando o notebook, que fez muita falta pra esse workshop. Saí na metade pra acompanhar a palestra sobre Responsive Design, que foi extremamente rápida – porque o design responsivo realmente bem feito é assim simples mesmo – e cobriu o necessário sobre o assunto sem enrolação.

Foi uma sorte muito grande o tempo hoje ter ficado fresquinho em São Paulo – imagino aquele Anhembi num dia de 32°C lá fora, sem água gelada. Mesmo assim pretendo voltar mais vezes, o evento vale muito a pena pra quem é apaixonado por tecnologia. E pra quem não está na capital, dá pra acompanhar as palestras ao vivo.

comente

Como personalizar a tela de login do WordPress

15/01/2013 | WordPress | |

Usar o WordPress para gerenciar conteúdo dos sites de clientes é super normal, mas às vezes o cliente é leigo e pode não entender o que é aquele logotipo na tela de login do painel de administração do site dele. Por isso, personalizar a tela de login pode ser uma boa idéia.

Tela de login padrão do WordPress

Se você olhar o código fonte, vai notar que o logotipo do WP é uma imagem de fundo num link dentro de um h1. Esse arquivo se chama wordpress-logo.png e fica na pasta wp-admin/images. As dimensões dele na versão 3.5 são 274×63 pixels. Você pode simplesmente substituir esse arquivo pelo logotipo do cliente? Pode, mas é um trabalho porquinho a cada nova atualização do WordPress você vai precisar fazer a alteração novamente. Por isso é mais fácil fazer essa modificação através do arquivo funcions.php.

Para trocar o logotipo, primeiro você precisa criar uma imagem. No exemplo estou personalizando a tela de login aqui deste blog. Criei um arquivo chamado login.png, com 300×150 pixels, e coloquei dentro da pasta do meu tema.

No arquivo funcions.php do tema eu faço a alteração:

1
2
3
4
5
6
7
8
9
10
11
// Muda o logotipo na tela de login do painel administrativo
 
function my_custom_login_logo() {
	echo '
	<style type="text/css">
	.login h1 a {
	background-image:url('.get_bloginfo('template_directory').'/login.png) !important;
	background-size: 300px 150px;
	height: 150px;}
    </style>';}
add_action('login_head', 'my_custom_login_logo');

Imagino que se você está personalizando a tela de login do WordPress é porque tem conhecimentos básicos em CSS, por isso considero o código auto-explicativo. Note que como a minha imagem é maior que a original, precisei alterar também a altura do elemento.

Outro detalhe é que a tela de login do WordPress não tem fundo branco, e sim cinza muito clarinho. Você pode usar essa mesma cor no fundo da sua imagem, mas é mais garantido usar um fundo transparente; afinal, você não sabe se vão mudar o tom de cinza na próxima versão!

Legal, mas o link ainda leva para o wordpress.org, e o tooltip ainda é “Powered by WordPress”, então vamos personalizar isso também. Volte ao functions.php e acrescente o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
// Muda o logotipo e o link na tela de login do painel administrativo
 
function loginpage_custom_link() {
	return get_bloginfo('url');
}
add_filter('login_headerurl','loginpage_custom_link');
 
function change_title_on_logo() {
	return 'Voltar para ' . get_bloginfo('name');
}
add_filter('login_headertitle', 'change_title_on_logo');

Este código vai automaticamente utilizar a URL do site como link, e o nome do site como tooltip. Olha como ficou o meu exemplo:

Tela de login personalizada no WordPress

Muito melhor, não? Lembrando que ele foi testado para a versão atual do WordPress, que na publicação deste post é a 3.5.

Outra utilidade desse código tão simples é personalizar o tema para agregar valor ao projeto final. Temas prontos e grátis existem aos montes, por isso tudo que a gente puder deixar com a cara do cliente é sempre bem-vindo ;D

Obrigada Cynthia Pereira e Adriano pelas correções ;D

3 comentários