Erika Sarti | portfolio web designer

CSS3: sombras com as propriedades text-shadow e box-shadow

Erika Sarti — Sun, 07 Mar 2010 14:04:25 +0000

Nesta matéria, vamos conhecer as propriedades text-shadow e box-shadow. A primeira é utilizada para adicionar sombras em textos. A segunda, por sua vez, é usada para aplicação de sombras em bordas. Sim, a possibilidade de adicionar sombras é uma das várias vantagens do CSS3 e por um motivo muito simples: elimina a necessidade de utilização de imagens para a criação desses efeitos.

Continue lendo “Novidades do CSS3: sombras em textos e bordas com as propriedades text-shadow e box-shadow” no InfoWester…

Novo trabalho no ar: redesign do Espaço Arte M. Mizrahi

Erika Sarti — Wed, 17 Feb 2010 12:06:04 +0000

Fui chamada pela Plataforma Tecnologia para fazer o redesign do site do Espaço Arte M. Mizrahi, uma galeria de arte em São Paulo. Fui responsável pelo layout, em XHTML e CSS. Com certeza é um dos meus trabalhos preferidos até hoje.

Em 2010 meu portfolio deve ficar meio parado, porque passarei os próximos meses trabalhando com consultoria em sites que não poderão ser publicados aqui. Ainda não sei se vou ter disponibilidade para jobs paralelos, já que este ano eu quero cuidar de projetos pessoais, mas vamos ver como as coisas se comportam daqui pra frente =)

Efeito de botão pressionado em link

Erika Sarti — Thu, 11 Feb 2010 19:58:54 +0000

No novo layout do CSS-Tricks, os links dos posts ganharam um efeito muito interessante: parecem “afundar” quando clicados, como um botão.

O CSS disso é incrivelmente simples, e com um pouco de imaginação pode ser aplicado em várias situações:

a:active {position: relative; top: 1px;}

No post Make All Links Feel Subtly More Button-Like você pode ver o efeito em ação e conferir mais detalhes sobre o CSS desse efeito.

Novas cédulas do Real foram lançadas hoje

Erika Sarti — Wed, 03 Feb 2010 18:14:41 +0000

Do UOL Economia:

As notas reformuladas de R$ 50 e R$ 100 começam a circular ainda no primeiro semestre deste ano, segundo informou o Banco Central. As notas de menor valor – de R$ 2, R$ 5, R$ 10 e R$ 20 – serão trocadas gradualmente até 2012.

As novas cédulas conterão itens de segurança mais sofisticados e layout mais atraente (…) A frente das cédulas ficou com um visual mais limpo, e manteve o símbolo da República. Segundo Guido Mantega, o intuito da mudança, além de evitar falsificações, é de deixar as notas de reais mais parecidas com as que são utilizadas na atualidade em outros países.

Só eu acho que esse espaço em branco vai ser o paraíso pra quem adora fazer aquelas odiosas simpatias na cédula pra chamar dinheiro?

O Download Day é hoje!

Google não vai mais rodar no Internet Explorer 6

Erika Sarti — Mon, 01 Feb 2010 18:46:32 +0000

No último dia 29 o Google anunciou, através de seu blog oficial, que a partir de 1º de Março o Google Docs e o Google Sites não oferecerão mais suporte ao IE6.

No post, intitulado “Modern browsers for modern applications”, o gerente do Google Apps diz que a web evoluiu nos últimos 10 anos, e que navegadores muito antigos não são capazes de rodar essas novas funcionalidades adequadamente.

Em outubro do ano passado o Orkut, site de relacionamentos que pertence ao Google, também anunciou o fim do suporte ao IE6 no seu novo layout.

Entre designers e desenvolvedores web, a notícia vem sendo comemorada já que, com o apoio do gigante Google, ficará muito mais fácil convencer os usuários a atualizar seus navegadores. Assim perderemos muito menos tempo corrigindo problemas específico desta versão do Internet Explorer.

Novo Orkut será incompatível com o IE6

Novidades no CSS3: bordas arredondadas com border-radius

Erika Sarti — Fri, 15 Jan 2010 20:35:08 +0000

Mesmo com muitos recursos disponíveis no CSS, ainda sentimos falta de algumas propriedades que facilitariam o nosso trabalho. Com base nisso, o CSS3, novo padrão para folhas de estilo que está sendo definido pelo W3C, trará algumas novidades bem interessantes. Neste artigo, vamos conhecer a propriedade border-radius, usada para criar bordas arredondadas. Apesar de ainda não ser suportado por todos os navegadores, este é um recurso que você já pode usar desde agora.

Continue lendo “Novidade do CSS3: bordas arredondadas” no InfoWester…

Mantenha sua instalação WordPress organizada

Erika Sarti — Thu, 14 Jan 2010 13:36:19 +0000

Seu site é como a sua casa: é importante manter tudo organizado, mas às vezes é necessário fazer uma faxina mais pesada. Se o seu site roda WordPress, veja algumas dicas para deixar tudo no lugar:

Faça o upgrade do WordPress
Atualmente é possível atualizar sua instalação do WordPress com apenas um clique, e ela é feita em poucos segundos. Então não tem desculpa para não fazer o upgrade regularmente. Novas versões são importantes porque corrigem problemas de segurança. Mas não esqueça de fazer backup antes do upgrade, só por garantia. Um ótimo plugin para isso é o WordPress Database Backup. Com ele você pode baixar o backup no seu computador, mantê-lo no FTP ou ou enviar o arquivo para o seu e-mail, e ainda pode agendar essa operação com a frequência que você preferir.

Mantenha seus plugins atualizados
Também é importante atualizar os plugins sempre que for possível. Porém, se você fez alguma personalização no código do plugin, não esqueça de manter uma cópia dos arquivos alterados antes do upgrade, para não perder seu trabalho.

Apague plugins desativados
Mantenha na sua instalação apenas os plugins essenciais, pois eles consomem processamento do seu host e podem deixar seu site mais lento. Se você não está usando um plugin, apague-o ao invés de deixá-lo desativado por meses no seu site. Quando testar novos plugins, tenha certeza de desativá-lo caso ele não seja útil.

Mantenha apenas os temas que você usa
A variedade de temas prontos para WordPress é grande e muitas vezes nos sentimos tentados a instalar e testar vários deles. Mas você só pode usar um tema por vez no seu blog, por isso mantenha apenas os temas essenciais instalados. Se não está usando, apague. Se você utiliza temas personalizados, teste o novo tema até ter total certeza de que ele não apresenta problemas e aí apague o tema anterior.

Otimize seu tema personalizado
Quando desenvolver seu próprio tema, mantenha-o otimizado: apague comentários e tabulações desnecessários do style.css e do código HTML. É importante ter algum conhecimento em PHP para não adicionar códigos de várias linhas que podem ser substituídos por comandos menores. Também é útil manter o HTML e o CSS validados e ter certeza de que o seu site funciona nos principais navegadores do mercado.

Apague imagens que você não está usando
Revise a biblioteca de mídia no dashboard de tempos em tempos. Se uma imagem ou vídeo não está sendo utilizado, apague-o.

Como você pode ver, não é difícil manter a ordem na sua instalação de WordPress, mas é necessário tornar isso um hábito. Mesmo que o dashboard do WordPress avise de novas atualizações para a instalação e para os plugins, agende lembretes em intervalos regulares para não esquecer de dar uma olhada nos plugins e nos temas. Você usa muito pouco do seu tempo e mantém seu WordPress em ordem e rodando na sua melhor forma.

Livremente inspirado em WordPress Housekeeping.

Último trabalho de 2009: portfolio do fotógrafo Leonardo Cairo

Erika Sarti — Mon, 04 Jan 2010 15:00:53 +0000

Felizmente 2009 terminou com muito trabalho – alguns jobs ainda não foram concluídos, outros não vão entrar para o meu portfolio a pedido do cliente. Dos sites finalizados nos últimos meses, faltou publicar aqui o portfolio do fotógrafo Leonardo Cairo, mais um site desenvolvido usando WordPress para gerenciar o conteúdo. Usei também um pouco de JavaScript no slideshow da página inicial, eliminando a necessidade de uma animação em Flash, o que facilita a manutenção e deixa o carregamento da página mais leve.

Todos os estilos de borda da propriedade border em CSS

Erika Sarti — Tue, 29 Dec 2009 12:11:23 +0000

A propriedade border do CSS é uma das mais conhecidas e usadas, mas nem todos os estilos de borda são bem aproveitados. Neste post, vamos ver todos os estilos de borda possíveis. Em todos os exemplos, a borda tem 3px de largura e a cor #666.

none Nenhuma borda

solid Define uma borda contínua

dotted Define uma borda com bolinhas, que varia de aparência conforme o navegador

dashed Define uma borda tracejada, que varia de aparência conforme o navegador

double Define uma borda dupla, onde a largura das duas bordas é a mesma do valor border-width (portanto, precisa ser no mínimo 3px para funcionar corretamente)

groove Define uma borda 3D com aparência de entalhe

ridge Define uma borda 3D com aparência ressaltada

inset Define uma borda 3D com aparência de profundidade

outset Define uma borda 3D com aparência de relevo

fonte: w3schools.com

O que é Design Gráfico? (Quentin Newark)

Erika Sarti — Sat, 05 Dec 2009 12:37:59 +0000

Dia 05 de Novembro comemoramos no Brasil o Dia do Designer, e a Bookman Editora sorteou 10 livros sobre design através do seu twitter. Eu fui a felizarda que recebeu um exemplar de O que é Design Gráfico? de Quentin Newark, no sorteio do @comlimao =D

O livro começa com uma discussão sobre a definição do Design Gráfico e sua ligação com a Arte e a Publicidade, pra depois abordar elementos básicos como tipografia, imagens e ferramentas. Já a segunda metade do livro é uma coletânea de portfolios de estúdios internacionais, com uma seleção de excelentes trabalhos nos mais diversos estilos. Uma maravilhosa fonte de inspiração para designers de todas as áreas.

Fiquei muito feliz com a iniciativa da Bookman, e gostaria de agradecer a editora e o blog Com Limão pelo presente. Se você se interessou por O que é Design Gráfico? pode adquiri-lo na loja online da editora.

O que é Design Gráfico
Quentin Newak
Formato: 17×22
ISBN: 9788577803798
Ano: 2009
N. de páginas: 256