Feed

05 dezembro 2008

DesCurso SEO

SEO, verdades e mitos

A agência 5clicks deu na última quarta, dia 03/12, uma mini-palestra sobre SEO: verdades e mitos. O palestrante, Miller Medeiros deu uma verdadeira aula sobre o assunto, tirou dúvidas com o pessoal, que também participou com comentários proveitosos.


Abaixo o link da apresentação. Recomendo uma leitura e uma olhada nos links no final.


SEO, verdades e mitos - Otimização de sites para a indexação nos motores de busca.


Parabéns a 5clicks pela iniciativa!


;)

03 dezembro 2008

1º Encontro de TI - Rio de Janeiro

1º ETI

Sei que estou um pouco atrasada para este post, mas antes tarde do que nunca!


Teve o 1º Encontro de TI, realizado pela Arteccom nesse final de semana no Rio de Janeiro, com palestras e oficinas bem interessantes.


A primeira palestra com Guilherme Chapiewski sobre a Importância das certificações para o mercado de trabalho, falou de como os profissionais se preocupam em tirar essas certificações. É um diferencial, não há dúvidas, mas o importante é a bagagem que a pessoa tem. O que eu achei legal, é que ele falou que não adianta ser só certificado. O cara que só pensa em certificações é o cara que "decora", sái do curso sem saber nada há não ser o que ele decorou. Então, resumindo, preocupe-se com o seu currículo/portfólio, certficações são importantes, mas não essencial!


Palestra sobre CMS: Wordpress (Guilherme Aguiar), Joomla! (Ricardo Accioly), Drupal (Paulino Michelazzo). Antes do debate, cada palestrante teve apenas 15 minutos pra apresentar a ferramenta. Pouco tempo, principalmente que apresentaram mais cases do que a ferramenta em si. Wordpress e Drupal ainda apresentaram uns plugins, mas Joomla! falou absolutamente nada! Ao meu ver, Wordpress é uma ferramenta muito fácil de se usar, e possui usabilidade ótima, enquanto Drupal pode implementar qualquer coisa, mas não serve para usuários leigos por ser um pouco mais complicada. Então, o Joomla! fica intermediário das duas. Acho que pessoas que nunca ouviram falar de CMS e precisasse escolher uma delas seria Wordpress pela sua facilidade. Foi a impressão que me passaram.


Após o almoço, palestra com Gustavo Loureiro sobre Google Analytics: como analisar acessos e gerar melhores resultados. Foram apresentados exemplos de como fazer metas e filtros usando a ferramenta. Indicou o URL Builder que serve para aplicar varíaveis na URL para colocar em banners de outros sites ou links para postar em comunidades sociais, e assim no Analytics, é mostrado a partir dessas variáveis, de onde seu visitante veio. O Gustavo foi prejudicado pela internet lenta, mas mesmo assim foi proveitosa.


A última palestra com Everaldo Bechara, sobre Padrões W3C: torne seu site mais leve e mais acessível foi muito boa. Ele deu dicas de como deve ser um site acessível, falou da importância da validação do código, e o uso certo do (x)HTML. Apresentou um exemplo de site feito em flash, e como um cego conseguiria (não) navegar no site. Nesse caso, ele indicou que fossem feitos sites estáticos também, já que os leitores virtuais não coneguem ler um conteúdo animado.


Infelizmente não pude participar das oficinas, mas fiquei sabendo que as melhores foram SEO com Paulo Teixeira e Scrum com Guilherme Chapiewski.


Além, das palestras, conheci e troquei twiters com várias pessoas. Muito bom para trocas de experiências e info!!


Teve venda de livros do Maujor e o lançamento do SEO Otimização de Sites do Paulo Teixeira.


Parabéns a Arteccom pela iniciativa, e um beijaaassso no povo que eu conheci no evento, principalmente o Richard Barros, o Gustavo Riveiro e o André! Adorei demais!!!


No Flickr já têm vários álbuns com fotos do envento: meu, Arteccom, Anderson, Marketing de Busca, e outros tantos


Procure no Twitter pela tag #eti, foram mais de 500 twittadas nesse dia, vale a pena dar uma conferida, pois tem dicas e links úteis que foram indicados nas palestras.


Outros artigos do evento: 1º Encontro de TI - Rio de Janeiro, 1º ETI sucesso Total, 1º ETI - Sucesso.


Update: Artigo da Nós Comunicação


;)

25 novembro 2008

Problema de redenrização de imagem Chrome e Safari



Problema de renderização de imagem Chrome e Safari

Hoje eu me deparei com um problema de renderização no Chrome e no Safari, e então o pessoal do meu Twitter falou que é por causa da mesma engine (webkit), que eles usam.


Bom, coloquei uma imagem no código sem o caminho do diretório preenchido: <li><img src="" alt="" class="bdrtop" /></li>. No CSS defini altura, largura, background e display block.


Até ai funcionou direitinho como eu queria, em todos os navegadores, incluindo o IEk 6. Juro! ¬¬


O problema é que no Chrome e no Safari, a rendenrização da imagem era feita com uma borda em volta. É a mesma coisa de quando uma imagem não é encontrada e fica aquela caixinha no lugar.


A solução que encontrei foi colocando essa imagem dentro de um span, então mudei a classe bdrtop para ele: <li><span class="bdrtop"><img src="" alt="" /></span></li>. No CSS coloquei essa imagem com display none.


É, eu sei que poderia ter deixado só o span dentro do li, mas ai deu problema no IEk 6. Quando eu tirava a tag img de dentro dos span's, o navegador ignorava a altura do span, ou do li que eu definia no CSS. Eu sei que não é uma boa prática, mas foi a solução mais rápida.


Pelo menos a dica de img com src vazio, sem que apareça a borda no Chrome e no Safari, funciona!


;)

20 novembro 2008

Donwload do livro A Arte e Ciência do CSS



The Art & Science of CSS

Hoje recebi na minha caixa de e-mail uma newsletter do sitepoint, site de artigos, notícias e tutoriais voltados para web designers e desenvolvedores web, falando que disponibilizaram o livro A Arte e a Ciência do CSS (The Art & Science of CSS). O donwload vai ficar disponível por tempo limitado, e para conseguir o link do pdf, basta segui-los no twitter ou assinar a newsletter.


;)

13 novembro 2008

Dia Mundial da Usabilidade Acontece Hoje



WUD

E eu consegui um convite para as palestras em Belo Horizonte!!! Aaeeeeee!!


A Janaina Oliveira, colega de trabalho daqui da agência, vai comigo. Tentarei mante-los informados através do meu Twitter, mas não vou prometer nada pois só vou ter meu smartphone para isso...


Mas de qualquer forma, podem esperar por comentários nossos aqui no blog com o que rolou nas palestras.


O site do evento em Belo Horizonte: diamundialdausabilidade.com.br


;)

12 novembro 2008

CHAT sobre Google Analytics da ETI



Google Analytics

O chat feito pela ETI e respondido pelo Google Advertising Professional Fernando Kanarski, do underGoogle.com.br e referência sobre o Google português, foi muito bom! Muitas pessoas presentes e as perguntas foram bastante relevantes. Anotei alguns pontos que achei mais importantes, mas para quem quiser, o chat está disponível no site da ETI. Abaixo uma pequena lista:


  • » O Google Analytics teve recentemente a mudança para a versão 3.0;

  • » No Youtube tem um vídeo que se chama "Advanced techniques in Google Analytics" que foi recomendado pelo Fernando. O vídeo está em inglês.

  • » Os scripts carregados pelo GA, deixam a pagina um pouco lenta, por isso é recomendado que esses fiquem no final da página, para que não interfiram no seu processamento, já que será a última coisa carregada. Para que o site seja todo "analisado", esse script deve ficar em todas as páginas, ou em algum include que fique em todas.

  • » Um e-book em pdf online também recomendado pelo Fernando.

  • » Sobre a apresentacao de dados para o cliente: dependem da necessidade de cada um, como por exemplo "visitantes vindos do google tem mais potencial?". Isso pode ser feito através da taxa de rejeição x tempo do site e conversões realizadas pelo google e outras mídias.

  • » Os sites feitos em Flash recebem o mesmo tipo de monitoração que os sites html. Mas para que o GA reconheça a navegação feita dentro do site e receba os dados necessários, deve-se incluir ações na linha de tempo. No próprio site do GA tem um tutorialzinho ensinando como fazer isso.

  • » Taxa de rejeição é a medida de profundidade de visitas em seu site. Quanto mais usuários acessarem a página e clicarem em outros links, menor será a taxa de rejeição. Os blogs tem uma taxa de rejeição mais elevada, mas pode ser evitada através de links como "leia mais". Não existe uma taxa de rejeição ideal, mas quanto menor, melhor. Outra dica para evitar o aumento dessa taxa, é induzindo o visitante do site a clicar em links de assuntos parecidos com o que ele está lendo.

  • » "Google Analytics é usado justamente para ver variações e erros ortográficos que levam usuarios ao seu site!"

  • » Como configurar a busca interna do GA?

  • » Blog do GA: analytics.blogspot.com

Acessem o site do chat para mais informações, foi muito bom!!


;)

05 novembro 2008

Dia Mundial da Usabilidade



WUD

O Dia Mundial da Usabilidade será realizado no dia 13 de novembro em várias partes do mundo. No Brasil, será no Rio de Janeiro, Recife e Belo Horizonte.


O tema abordado desse ano será o transporte, que é a interação de pessoas e veículos. No site do evento do Rio ou no site oficial do evento, tem todas as informações detalhadas.


ps.: em breve trarei mais artigo do Joomla!


;)

25 setembro 2008

Joomla: Configurações Globais para SEO



globalConfiguration

O Global Configuration serve para controlar todas as operações do Joomla, no site, no sistema (System) e no servidor (Server). Explicarei somente as configurações para o site que são mais relevantes para o SEO.


Em Site Settings temos a opção de deixar o site online ou offline (Site Offline). Isso é útil caso apareça algum problema e é necessária a correção imediata. Ativando essa opção, quando o site é acessado por alguém, é exibida uma mensagem que pode ser modificada em Offline Message. Dica: Não publique o seu site antes de ter pelo menos uma página principal. Ficaria ruim se os robôs de busca indexassem o seu conteúdo como "Site em manutenção.".


Também pode ser modificado o nome do site (Site Name) que é exibido nas páginas offline e no topo da página do modo administrador. Ainda em Site Settings, temos algumas opções que ajudam na busca e posicionamento dos sites nos mecanismos de busca. Nas opções encontradas dentro do bloco SEO Settings, temos Search Engine Friendly URLs, onde as URLs são otimizadas para os mecanismos. Ao invés de exibir uma URL cheia de caracteres, é exibido o título do conteúdo exibido ou da seção selecionada. Para entender as vantagens disso, leia Utilizando mod_rewrite para criar URLs amigaveis do Celso Fernandes. A opção Add suffix to URLs, serve para adicionar a extensão do arquivo no final da url (.html, .php etc). Não é necessário deixar habilitado, pois os mecanismos de busca não usam. A opção Use Apache mod_rewrite dexei desabilitada. Quando habilitada, se na URL tiver algum /index.php/, por exemplo, ela não é exibida, mas para essa opção funcionar, deve-se renomear o arquivo htaccess.txt no root do Joomla para .htaccess. Depois disso é necessária algumas configurações no apache. Mais informações em Joomla! v 1.5 Search Engine Friendly URLs (SEF URLs).


No bloco Metada Settings também temos propriedades que só serão vistas pelos robôs de busca. Global Site Meta Description, é a descrição do site. Essa descrição deve ter no máximo 200 caracteres, acima disso os mecanismos de busca não indexam. Global Site Meta Keywords, são as palavras chave do site. As palavras ou frases são separadas por vírgula. Show Title Meta Tag, é o título da página e Show Author Meta Tag é o autor do artigo.


Dica: Concentre as palavras chave no conteúdo da página, principalmente nos títulos. O Google é um dos mecanismos que não lê as meta tags por causa das keyword spamming.


Para entender melhor as configurações das abas System e Server, leia o help do Joomla.



;)

22 setembro 2008

Desenvolvendo com Joomla



Joomla CMS

Para quem não sabe, Joomla é uma ferramenta CMS. Não entendeu? humm...


O Joomla serve para gerenciar conteúdo web, ou seja, criar ou manter portais web. A vantagem de se usar essa ferramenta é que, mesmo uma pessoa sem muitos conhecimentos de programação ou desenvolvimento, consegue fazer os ajustes do portal sem muitos problemas. Mas claro que é necessário pelo menos um conhecimento básico da ferramenta, e é por isso que vou fazer uma bateria de artigos, para "dar uma luz" nesse assunto, mas não sou uma expert, então dicas e opniões são bem vindas.


O Joomla usa linguagem PHP e possui várias comunidades que desenvolvem plugins e temas para facilitar ainda mais o seu uso. Citarei algumas nos artigos.


Para começar, precisamos ter na máquina um servidor para que possamos rodar o PHP. Recomendo o WampServer, pois não precisa ficar mechendo nas configurações para que funcione e é gratuita.


Após instalar o servidor, iremos baixar o Joomla. Descompacte o arquivo e copie todo o conteúdo para dentro do servidor. Se você está usando o WampServer, o caminho é c:/Arquivos de Programas/wamp/www/. Crie uma pasta "joomla" e cole esse conteúdo dentro dela para que fique mais organizado caso se crie outro site.


Agora a instalação do Joomla. Veja esse tutorial do Ribamar FS, apesar de ser de uma versão mais velha, ajuda muito. Até a página 18, tem explicando passo-a-passo o que é necessário para que o Joomla funcione sem problemas.


Vale a pena dar uma conferida no restante do tutorial, pois já ensina as funções básicas da ferramenta.


Brinque um pouco para enteder a ferramenta melhor, em outros artigos eu entro em mais detalhes quanto a temas, funções, prós e contras do Joomla.



;)

11 setembro 2008

Think Geek



ThinkGeek

Procurando por algum avatar para o meu gTalk, achei uma imagem escrito com o mesmo estilo da logo do Google, a palavra "Geek". Já ouvi falar desse termo, mas nunca procurei saber o que era realmente.


Então nas pesquisas descobri que sou uma geek! Você também deve ser um. Olha a definição no Wikipedia.


Tá, mas eu não vim aqui assumir isso, o foco é outro. É que quando fiz a pesquisa, no terceiro link tinha o Think Geek, um site de e-comerce. Eu não sou de fazer compras via internet, mas esse é o portal perfeito para quem quer mostrar para todo mundo o seu lado gambiarra, nerd, técnico, fanático ou geek. E eles tem vários modelos de camisas com desenhos de jogos, piadinhas de nerds ou números binários que só agente entende.


As coisas são vendidas com um preço acessível, o que atrapalha mesmo é o frete, mas acho que vale a pena.



;)

20 agosto 2008

Plugins Firefox para Web Designers



img

Olá leitores! Vou falar dos plugins que eu uso no meu dia-a-dia, que me ajudam muito no rendimento do desenvolvimento do projeto e conseqüentemente facilita muito o trabalho.


    • ColorZilla

    • ColorZilla

    • Captura as cores da página exibida no navegador. Acho muito útil, pois não é necessário ficar abrindo o CSS para descobrie o valor dela. Esse valor é mostrado em hexadecimal e RGB. Ele dá a opção de salvar a cor em uma paleta caso seja necessário. Além disso ele possui outras funções como zoom em imagens e um analisador de cores. Esse último eu nunca usei, mas na página do plugin tem todas as especificações.

    • Firebug

    • Firebug

    • Acredito que todo desenvolvedor que usa o Firefox tem esse plugin instalado. É ótimo e é um dos que eu mais uso. Ele te da a opção de poder editar o código e mostrar o resultado instantaneamente. No CSS é melhor ainda, que assim você pode definir posições, alinhamento, tamanho etc sem precisar ficar voltando no programa, editar, voltar no navegador e atualizar a página. Isso gasta tempo, logo, sua produção é prejudicada! Esse plugin também possui um debugger para Javascript, eu não uso, mas sei que ajuda pois já vi os programadores daqui da empresa usando. O que eu acho legal também, é que ele mede o tamanho da página, mostrando o tamanho dos arquivos carregados ou tempo gasto. Possui outras funcionalidades interessantes também, quem souber de alguma não citada, compartilhe!

    • Html Validator

    • Html Validator

    • É um validador de (X)HTML. Mostra os erros do código e a possível solução. Tem me ajudado muito no trabalho. Principalmente naqueles códigos que tem tags que não estão no padrão. Um exemplo típico, é abrir uma tag e não fechá-la, como ‹br/›.

    • IE Tab

    • IE Tab

    • Para quem tem que ficar testando o site em vários navegadores, esse plugin já adianta um pouco. Ele simula o IE(k) no Firefox sem a necessidade de abrir o programa, pois abre o navegador em uma tab, assim, economiza na memória do computador. O IE simulado é o que estiver instalado na máquina. O que eu gosto nele também, é que você pode definir as páginas que devem ser abertas no IE. Não adianta, sempre tem alguma página que o desenvolvedor fez somente para esse navegador, não só na parte visual, mas funcional também como um JS que não roda direito na raposinha ou outros navegadores.

    • MeasureIt

    • MeasureIt

    • É uma régua que mostra os valores em pixels. Não uso com muita frequência, mas ajuda a descobrir se os elementos estão alinhados corretamente ou o tamanho de alguma coisa em uma página.

    • Web Developer

    • Web Developer

    • O Web Developer possui várias ferramentas em um único plugin. No menu que pode ficar abaixo da barra de endereços do navegador ou no clique no botão direito do mouse em alguma página. Ele possui um editor de CSS, que as vezes eu acho mais útil que o do Firebug, e também mostra o resultado instantaneamente; desabilita cookies, JS, CSS, imagens; tem uma opção que mostra detalhes de formulários como os parâmetros usados nos campos, assim como exibe detalhes de imagens, links, divs etc. Resumindo, praticamente todos os detalhes do código, sem que seja necessário abrir o código fonte. Esses detalhes são mostrados do lado do elemento da página. Um dos recursos que eu uso bastante é o Resize, onde é possível definir tamanhos para o navegador. Acho bom para ver como a página é visualizada em resoluções 800x600 e 1024x768 que estão abaixo da que eu uso. No Tools tem um validador W3C, tanto para (X)HTML, quanto para o CSS. Conclusão: da mesma forma que o Firebug é essencial, esse plugin também é. É um dos favoritos.


Bom, quem tiver mais algum plugin para a lista, me manda com uma breve descrição que eu dou um update. Em um outro post, eu falo de outros plugins que uso, não para o desempenho de desenvolvimento, mas mais para facilitar no uso do navegador, como o GooglePreview, ou outros que facilitam uploads como o Fire Uploader. Além das frescuragens hehe.



Update: Gente, o Thiago deixou nos coments mais uma extensão para criar paletas de cores para o Photoshop, GIMP, Flash, Fireworks etc a partir de alguma página. Não testei ainda mas parece muito boa. Obrigada Thiago.



;)

04 agosto 2008

Geradores de esquemas/paletas de cores



image

Eu não sei se isso acontece com todo designer, mas eu sou realmente perfeccionista com meus trabalhos.


Antes de começar qualquer projeto, inicio sempre pela logo, pois ela que vai definir as cores usadas no trabalho.


Mas nem sempre temos criatividade o suficiente de combinar essas cores com outras, sem deixar que o layout/desenho fique bagunçado, exagerado ou apagado demais.


Por isso escolhi alguns sites para dar uma forcinha nisso. A partir de uma cor base, você consegue outras que deixam a combinação harmônica. Se você preferir existem outros que te dão paletas de cores prontas ou fazem esquemas de cores a partir de uma imagem de sua escolha!


Veja esses links

Eu sempre faço uma visita nesses sites para ter uma idéia de combinação nos trabalhos, e recomendo os que estão em negrito. São os que eu mais uso.



;)

28 julho 2008

Usando fontes como elementos gráficos



imagem

Achei uma dica muito bacana no site KREATIVUSE. A dica serve mais para
o pessoal que usa o Fireworks ou outros programas que não dão muitas opções de gráficos tipo shapes e brushes como no Photoshop.


Uma boa alternativa é o uso de fontes. Existem muitas fontes que são desenhos/símbolos que podem ser usados nos trabalhos, tanto gráficos quanto digitais. A vantagem da fonte é que ela suporta tamanhos maiores sem que perca a qualidade (mas nem todas), como vetores. A desvantagem é que se você não tiver um backup dela e tiver que mudar de computador, vai ter que procurá-la de novo para instalar novamente. Mas acho que não é uma coisa que atrapalhe muito, é só deixar anotado junto com o projeto o nome dela.


No KREATIVUSE tem uma coletânia de fontes bem legais. Também indico o site dafont.com que possui várias outras para download tanto para PC quanto para MAC.


Fonte: KREATIVUSE



;)

17 julho 2008

Estilizando tabelas no XHTML <table>



imagem

Quem me conhece sabe que odeio trabalhar com tabelas, sou completamente viciada em tableless, mas dependendo do desenvolvimento, não é muito funcional deixar de lado as tabelinhas.


Eu acho o uso de tableless essencial e muito mais fácil para sites que não exibirão dados tabulares. Com o uso das tags certas e CSS, é possível colocar os elementos de um site em qualquer posição. Mas não é a mesma coisa quando vamos carregar dados de um banco de dados, por exemplo.


O artigo de hoje é para mostrar uma maneira mais fácil de exibir esses dados com o uso de tabelas e estilização via CSS, sem a necessidade de inventar um tanto de classes e id's. Começando pelas principais tags:



  1. <table>: delimita a tabela. É a primeira tag;

  2. <caption>: título da tabela;

  3. <thead>: cabeçalho;

  4. <tfoot>: última linha da tabela;

  5. <tbody>: para delimitar o meio da tabela;

  6. <tr>: linhas;

  7. <td>/<th>: células.


ps.: Visite o tópico de tabelas da W3 para ler mais sobre outras tags e aplicações.


O código da nossa tabela:


<table border="0" cellpadding="0" cellspacing="0" summary="Essa tabela é para apresentar alguns dos sites que vocês podem me encontrar.">
    <caption>Onde encontrar a Cléo</caption>

    <thead>
        <tr>
            <th>Ícone</th>
            <th>Nome do site</th>
            <th>Link</th>
            <th>Descrição</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th colspan="4">by Cléo Morgause</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td><img src="http://imgSRC/googlereader.png" title="Google Reader" alt="icone" /></td>
            <td>Google Reader</td>
            <td>http://www.google.com/reader/shared/13446221401570394803</td>
            <td>Artigos compartilhados de alguns dos blogs que eu acompanho.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/twitter.png" title="twitter" alt="icone" /></td>
            <td>twitter</td>
            <td>http://twitter.com/cleomorgause/</td>
            <td>Rede social que permite o envio de mensagens de até 140 caracteres. Útil para divulgação de conteúdo e links.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/delicious.png" title="del.icio.us" alt="icone" /></td>
            <td>del.icio.us</td>
            <td>http://del.icio.us/cleomorgause/</td>
            <td>Coleção dos meus links favoritos e também aqueles que acho mais úteis. É ótimo, pois não me preocupo em ficar salvando bookmarks em HTML.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/internal.png" title="friendfeed" alt="icone" /></td>
            <td>friendfeed</td>
            <td>http://friendfeed.com/cleomorgause</td>
            <td>Junta todos os meus updates em um só lugar.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/plurk.png" title="PLURK" alt="icone" /></td>
            <td>PLURK</td>
            <td>http://www.plurk.com/user/cleomorgause</td>
            <td>Funciona como o twitter, mas acho mais interativo e mais viciante.. hehe.</td>
        </tr>
    </tbody>
</table>

Agora que usamos as tags certas, fica muito mais fácil colocar estilo na tabela. Note que a única classe usada foi para diferenciar uma linha da outra, e mesmo assim só muda o background e o :hover da linha.


Abaixo o CSS que eu fiz:


* {
    margin:0;
    padding:0;
}

body {
    font:11px Verdana, Arial, Helvetica, sans-serif normal;
    color:#333;
}


/*TABELA*/
table {
    background:#D1DCDF;
    border:1px solid;
    border-collapse:collapse;
}

table, caption {
    margin:auto;
    width:748px;
}

caption {
    color:#003D5F;
    font:700 18px Georgia, "Times New Roman", Times, serif;
    padding:6px 4px 8px 0px;
    text-transform:uppercase;
}

    caption, thead th, tfoot th {
        text-align:center;
    }

    thead th, tfoot th {
        background:#305761;
        font-weight:700;
        padding-top:3px;
    }

    tbody th, tbody td {
        text-align:left;
        vertical-align:top;
    }

        tbody tr:hover {
            background:#88839E;
        }

    tfoot th {
        font:9px Georgia, "Times New Roman", Times, serif;
        text-align:right;
    }

        td, th {
            border:1px dotted;
            padding:5px;
        }

        .par {
            background-color:#90A8A8;
        }

            tbody tr.par:hover {
                background:#585370;
            }


/*CORES*/
table, thead th, tfoot th, tbody tr:hover, td, th {
    border-color:#003D5F;
}

thead th, tfoot th, tbody tr:hover, tbody tr.par:hover {
    color:#FFF;
}

No final a tabela deverá ficar assim.


Qualquer dúvida postem nos comentários.
Se preferirem, baixem o arquivo XHTML.


Links interessantes

No site CSS TABLE GALLERY tem uma lista com quase 100 CSS de estilização de tabelas disponíveis para download, além de poder enviar seu próprio estilo para outras pessoas baixarem. Vale a pena dar uma conferida.



;)

11 julho 2008

Adicione comentários em imagens e compartilhe



imagem

O Fine Tuna é um site onde você envia uma imagem ou uma foto (do computador ou um URL), e coloca um comentário em cima dela. Funciona como os comentários nas fotos do Flickr, a diferença é que não é necessário criar uma conta. E o legal é que depois você pode compartilhar com amigos e familiares mandando o link por e-mail através de um campo no canto superior do site. É interessante, pois pode ser usado em algum screen de um layout para um cliente, então ele poderá dizer o que pode ser mudado através dos comentários que ficam em um lugar determinado por ele. É bem útil!


Fonte: Smaching Apps



;)

01 julho 2008

Trabalhos Freelancers



imagem

Não, eu não abandonei o blog!


Estava estudando para as provas da faculdade, por isso tanto tempo sem colocar nada aqui.


Bom, agora que estou de férias, vou poder dedicar aos posts e meus freelas. Adoro fazer esses bicos, tanto por ganhar uma graninha extra quanto por poder participar de todas as etapas do projeto.


Mas mantenho o meu emprego fixo, e como não tenho tempo de procurar pessoas para oferecer meu trabalho, uso alguns sites, tanto pela comodidade, quanto para saber se estou careira ou não.


Vejam esses:

Nesses sites você pode cadastrar seu perfil e selecionar as áreas de atuação. Então, poderá ser escolhido por alguém para um trabalho, ou oferecer propostas aos que são cadastrados no mesmo.


Indico também o Carreira Solo que tem uma galeria para cadastros de freelancers e ainda dá dicas para um melhor desenvolvimento ou planejamento, além do conhecimento que se ganha.


O blog continua, e com o tempo eu vou melhorando os posts. Obrigada por não me abandonarem!!!! xD



;)

20 junho 2008

Desastres no Photoshop



imagem

Há mais ou menos quatro anos eu comecei a mexer com web design. Na época fiz um curso que me deu uma ótima base nas ferramentas da Macromedia, hoje Adobe. Fiz meu primeiro estágio usando as mesmas ferramentas, já no segundo fui obrigada a aprender a usar o Photoshop. Briguei demais com ele, odiava, era a coisa mais complicada do mundo. Mas com o tempo acabei me apaixonando pelo falsificador!


É isso mesmo: fal-si-fi-ca-dor. hahah.. calma, não estou menosprezando a ferramenta, mesmo porque não abro mão dela de jeito nenhum, da mesma forma que a maioria das pessoas que a conhecem e aprendem a usá-la fazem o mesmo. Principalmente quem gosta de se modificar, transformar ou falsificar.


Acompanho vários artistas por meio de feeds que fazem milagres com essa ferramenta, desde vetores até aquelas artes darks sangrentas com olhos caindo. E eu não posso me esquecer dos artistas que ficam maquiando as fotos de revistas. Quem nunca viu uma foto original da Juliana Paz e a photoshopada??? Ou de qualquer outra mulher dessas revistas?! Elas têm que estar impecáveis, imagina o trabalho que estes artistas tem para que elas fiquem perfeitas. Ah é, e isso vale para os machos também.


Mas eu não estou aqui para divulgar curso de photoshop, nem algum artista, nem roubar, nem matar... aff. Eu fiz uma seleção de imagens de artistas que sabem usar o Photoshop, alguns até muito bem, mas não usam a cabeça. Na minha opnião, os detalhes de um desenho, layout, logo etc, são o que fazem a diferença. E os erros fazem uma diferença maior ainda.


Acompanhe as imagens abaixo, e você vai entender direitinho o que estou falando.


  • imagem01

  • imagem02

  • imagem03

  • imagem04

  • imagem05

  • imagem06

  • imagem07

  • imagem08

  • imagem09

  • imagem10

  • imagem11

  • imagem12

  • imagem13

  • imagem14

  • imagem15

  • imagem16

  • imagem17

Quer chorar rir mais um pouco?? Então entra no site Photoshop Disasters, onde estão as imagens com tamanhos maiores e outras pérolas do Photoshop.



;)

19 junho 2008

Meia Amazônia Não [OFF TOPIC]

Para mais informações visitem o site Meia Amazônia Não. Essa campanha é para que não seja legalizado o desmatamento de 50% da floresta Amazônia.


Participe da campanha, divulgue para amigos, em blogs, Orkut etc e assine o abaixo-assinado para que possamos impedir isso.


Fonte: Bobagento



;)

18 junho 2008

CSS: Regras (que eu uso) na Organização do Código


imagem

Organizar códigos é muito importante, principalmente quando trabalha-se em equipe. A organização dos códigos fontes de um projeto ajudará na eficiência do trabalho, pois ficará mais fácil fazer a manutenção do mesmo e procurar por alguma linha específica.


Vou mostrar algumas regrinhas que se aplicam aos códigos CSS para uma boa organização.

Ordene e agrupe por seletores


É conveniente separar o código por seletores, preferencialmente hierarquizados, já que o navegador lê o CSS de cima para baixo, assim, você mudará pequenas diferenças (cor, tamanho da fonte etc) de um seletor para outro.


A ordem que eu uso é: *, html, body, a:(link, hover, active, focus, visited), p, h(1, 2, 3, 4, 5, 6), table, tr, th, td, fieldset, legend, address, ul, li, ol, dl, form, input, select, label, textarea, div, img, span, #nomeId, .nomeClasse.


Esses são os seletores que eu mais uso nos projetos. No .css ficaria assim:


ul, li, .msg {}
ul {}
li {}
.msg {}

Mesmas propriedades para vários seletores


Acho que um dos maiores problemas dos CSS's é o fato de ter repetida as mesmas propriedades para vários seletores. Isso prejudica o código em sua estrutura e principalmente no seu tamanho, tanto visual quanto virtual. Veja o exemplo abaixo:


h1, h2, h3 {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong {
font-style:italic;
font-weight:100;
}

#nav {
font-style:italic;
}

.msg {
font-style:italic;
}

/*Esse código pode ficar assim:*/
h1, h2, h3, strong {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong, #nav, .msg {
font-style:italic;
}

Dica: Leia Dica de otimização de CSS I para ver uma técnica de aninhar as propriedades do CSS.


Declarações em ordem alfabética


Ordenar as propriedades em ordem alfabética ué. Entendeu não?


#container {
border:1px dashed;
color:#000;
margin:auto;
padding:1em 0;
width:700px;
}

Separar as cores


Separar as cores de bordas, backgrounds, textos etc. Se você precisar usar o mesmo CSS para outro projeto de cores diferentes não será necessário editar linha por linha.


body {
border-left:2px solid #040770;
border-top:2px solid #040770;
}

td {
background:#040770 url(../img/linkOn.gif) no-repeat right;
border:1px dashed #040770;
}

a:hover {
background-color:#040770;
padding-right:15px;
}

/*Com a separação do código fica assim:*/


body {
border-left:2px solid;
border-top:2px solid;
}

td {
background:url(../img/linkOn.gif) no-repeat right;
border:1px dashed;
}

a:hover {
padding-right:15px;
}

/*CORES*/
body, td {
color:#040770;
}

td, a:hover {
background-color:#040770;
}

Nomeie os blocos do CSS e separe-os com espaços duplos


Separe-os por blocos titulados, como no último exemplo. Fica mais fácil de entender.


/*LINKS*/
a:hover, a:active {
background:url(../img/linkOff.gif) no-repeat right;
color:#666;
cursor:pointer;
}


/*TEXTOS*/
p {
margin:15px 0;
}

p .msg {
margin:15px 6px;
}

p .ins {
list-style:none;
text-align:justify;
width:419px;
}


/*TITULOS*/
h1, h2, h3 {
margin-top:10px;
padding:0 0 3px 5px;
width:75%;
}

Últimas regras:


Tente não usar hacks (apesar dos IEk's não deixarem);

Use um CSS "global.css" para colocar as propriedades padrões e importar outros arquivos .css;

Se for um projeto maior, separe os arquivos .css para form's e seus filhos como input, label, textarea, .btn etc. Essa dica pode ser usada para outras situações como tabelas ou fieldsets;

Importe apenas o arquivo global.css no HTML;

Idente o código. A imagem do post é um ótimo exemplo;

Tente validar o seu código.



Depois desse artigo não devo continuar a série de otimização, acho que coloquei todas as que eu uso aqui. Mas se eu aprender alguma coisa nova, divulgo no blog.




;)

11 junho 2008

6 Etapas para o desenvolvimento de um site

desenvolvimento

Esse artigo é uma lista de etapas que podem ser seguidas para o desenvolvimento de um site. Ajudará quem está começando a se organizar melhor.


Nele descreverei pontos para ajudar no relacionamento com o cliente no processo de criação e desenvolvimento do site.


Serão descritas etapas mais específicas para o desenvolvimento de web sites, porém não se limitam somente a este tipo de projeto.


O processo de desenvolvimento de um site pode ser enumerado nas seguintes etapas:



  1. Coleta de Informações

  2. Planejamento

  3. Design

  4. Desenvolvimento

  5. Testes e Publicação

  6. Manutenção


Etapa 1: Coleta de Informações

Nessa primeira etapa serão coletadas as informações necessárias para o desenvolvimento do site. Recomendo um briefing com as principais perguntas: público alvo, concorrentes, preferência de cores, material disponível (fotos, textos, identidade visual do cliente etc), prazo etc. Quanto mais detalhado, mais fácil será o desenvolvimento.


Essa etapa é a mais importante, pois vai dar ao cliente um maior entendimento do projeto, e é nela também que você passará ao cliente qual é a melhor apresentação do site: navegação, posicionamento dos objetos, se terá ou não animação em Flash, entre outros. Lembre-se que o cliente não sabe nada do que você faz nem a melhor maneira, por isso que deve ser mostrado qual é a melhor solução, dependendo do público alvo, conteúdo, quantidade de textos e fotos.


Uma lista de coisas que devem ser consideradas:



  1. Propósito: qual o propósito do site? Fornecer informações, serviços, propaganda, vendas...?

  2. Metas: Quais as expectativas em relação ao site? Fazer dinheiro ou compartilhar informações?

  3. Público Alvo: Qual o grupo de pessoas que ajudarão a alcançar as metas? Qual é o tipo de pessoa que quer que visite o site? Idade, sexo, interesses são fatores importantes no desenvolvimento de um bom design.

  4. Conteúdo: Qual o tipo de informação para o público alvo? Algum assunto específico, um produto ou serviço, algum requisito..?


Etapa 2: Planejamento

Com as informações coletadas na primeira etapa, é hora de fazer o planejamento do site. Esse planejamento inclui a navegação do site e seu mapa.


O "mapa do site" é feito com os tópicos mais importantes e seus sub-tópicos, se tiver. Ele é um índice para um fácil entendimento da navegação do projeto.


As informações de um site são ligadas através de links e um menu principal. Uma navegação efetiva é intuitiva, ou seja, a pessoa que entrar no site não precisa ficar procurando pela informação desejada. Não seria correto colocar no link de contato um ícone de casinha.


Nessa etapa também será decidida a tecnologia usada para o desenvolvimento: Flash, HTML, Ajax etc, você que dará a melhor solução para o cliente. Não recomendo o desenvolvimento de sites com muito texto em Flash, da mesma forma que um hotsite chamaria muito mais atenção com o uso dele.


Dica: Após essas duas etapas recomendo que seja feito um contrato de prestação de serviços, para sua segurança e do cliente. Veja o exemplo no site da revista Web Design.



Etapa 3: Design

A primeira etapa de um design é o rascunho. Com as primeiras etapas feitas você terá a identidade visual do cliente, as cores (geralmente as mesmas da logo), a quantidade de informações, textos, imagens etc. Antes de começar a desenhar uma versão no pc, mostre um rascunho para o cliente. Dessa forma você terá menos chance de ter que começar tudo de novo porque ele não gostou da idéia.


Com a aprovação desse rascunho passe para o pc. No final de cada layout, apresente a versão final e deixe claro no contrato do projeto que ele não pode ficar modificando o layout. Claro que pequenas modificações são aceitas, por isso que mostramos essa versão, para que na hora do recorte de layout, não seja necessário fazer modificações que poderiam ser feitas nessa etapa com muito mais facilidade, evitando assim o retrabalho.


Dica:Tente deixar arquivada a evolução do layout, pelo menos em .jpg. É bom para experiências futuras!


O feedback com o cliente nessa fase é crucial para assegurar sua satisfação e para que não haja "perda de tempo". Imagine terminar o código da página e ter que fazer outro design? Pior ainda se for uma apresentação no Flash. Lembre-se sempre de evitar o retrabalho.



Etapa 4: Desenvolvimento

Após a aprovação dos layouts das páginas, é hora de recortar tudo e implementar suas funcionalidades. Agora o site começa a ser criado.


Geralmente esse desenvolvimento começa da página inicial indo para as internas, principalmente por ser usado um "skin" para as outras páginas. O skin é a parte do site que se repete: navegação, topo, rodapé...


No decorrer do desenvolvimento você perceberá quais as melhores maneiras de interação do usuário com o site. Faça as modificações adequadas, mas não coloque códigos ou animações desnecessárias. Isso atrapalha muito na implementação das técnicas SEO.


Deixe o código bem identado, de fácil entendimento e use os padrões atuais dos web standards, isso ajudará na manutenção.


O mais importante nessa fase: desenvolva um site que seja bem visualizado em pelo menos dois navegadores diferentes: Firefox e Internet Explorer. O usuário final pode acessar o site de qualquer plataforma.


Dica:Não use arquivos .js e .css dentro do mesmo código das páginas, faça chamadas externas, assim o seu código não vira uma lingüiça e também não corre o risco de dar algum problema na visualização, sem falar que fica bem mais organizado.



Etapa 5: Testes e Publicação

Nessa fase, você precisará da ajuda do cliente ou de alguém de fora. Geralmente a pessoa que está fazendo o trabalho não vê pequenos detalhes que podem fazer grande diferença no final. Aceite sugestões e opiniões de outras pessoas, tanto alguém que também seja desenvolvedor, quanto uma pessoa que não entende nada de computadores.


Faça teste nos links para ver se não estão direcionando para lugares errados; verifique a compatibilidade dos navegadores quanto à visualização (navegadores antigos são os que dão mais problemas); resolução de tela; usabilidade (pessoas com daltonismo vão conseguir identificar um link no site?).


Após "defeitos concertados" e a aprovação do cliente, é hora de publicar o site. Um programa de FTP faz o upload dos arquivos para a internet, onde o site será visualizado por qualquer pessoa. Nessa etapa você pode oferecer ao cliente um suporte para registro de domínio e a escolha da melhor hospedagem caso ele não tenha.


Faça mais um teste por precaução e peça para o cliente fazer o mesmo antes da divulgação oficial.



Etapa 6: Manutenção

Somente o desenvolvimento do site não é o suficiente. Uma maneira de garantir novos visitantes ou manter os atuais é atualizando a página com novos produtos, serviços, informações. Se for um cliente que precise de atualizações constantes, faça um contrato de manutenção. Caso ele mesmo prefira fazer isso, ofereça alguma ferramenta de CMS e adapte ao site.


Nessa etapa você pode oferecer as técnicas SEO. A otimização dos elementos como títulos, meta tags, descrição, palavras chave entre outros, são muito importante para a posição do site nas páginas de busca. Além disso, o uso de ferramentas de análises podem ser feitas para acompanhar o desempenho do site quanto ao número de visitantes, se o usuário está vindo de link direto ou se vem de alguma outra fonte. Visite o site Mestre SEO para algumas dicas.


Para fazer esse artigo, coloquei experiências próprias e algumas do artigo "6 Phases of the Web Site Design / Development Process" da Selene M. Bowlby, que me deu uma base para escrever o conteúdo.


Espero que ajude!



;)

09 junho 2008

Progamas de emular Internet Explorer

Todo web designer sabe que seu site pode ser acessado por qualquer usuário independente do sistema operacional ou do navegador usado.


Infelizmente, sabe também que para que não se tenha problemas de interface, sem que haja diferenças de um navegador para o outro, vai ter que testar seu site, em pelo menos, nos browsers mais usados.


Sabemos que nosso maior problema é a incompatibilidade de alguns navegadores que não seguem os padrões W3C ou que são ultrapassados. Por isso estou fazendo esse post, para listar alguns programinhas que são uma mão na roda quando formos testar no IE6 e IE7, que acredito que sejam os nossos maiores problemas, já que esses seguem padrão "Tio Bill". Quanto aos outros navegadores, os que eu uso que são o Opera, Safari e Netscape não tive problemas, somente uma margin ou uma div que ficou com tamanhos diferentes, coisas que não fazem muita diferença e nem estragaram o Tableless.

  • IE Tab

    ietab
    Esse plugin para o Firefox deixa emular o IE que estiver instalado na sua máquina em uma tab. É bom, pois economiza na memória do pc e facilita no trabalho.
  • Multiple IE

    multipleie
    Esse programa instala, desde a versão 3 até a 6. É melhor para quem já tem o IE7 instalado. Eu instalei na máquina para emular as versões 5.5 e 6. Geralmente, as incompatibilidades de uma versão para a outra são as mesmas.
  • IETester

    ietab
    Emulador dos IEs: 8beta1, 7, 6 e 5.5. É instalado na máquina e o sistema operacional deve ser um XP ou Vista, de preferência com o IE7 instalado pois com o IE6 pode ter alguns probleminhas no emulador do IE7 e IE8 por causa de algumas configurações que ele não possui.

Eu tenho os três instalados. O último coloquei na semana passada para ver como que ia ficar um site que fiz no IE8. Fiquei decepcionada demais... mas não surpresa. O Multiple IE ajuda bastante, apesar de ter de abrir uma janela para cada navegador. E o IE Tab é essencial para qualquer web designer.


Quanto aos outros navegadores, não conheço nenhum emulador que tenha todos, mas tem o site Browser Shots que pode fazer isso, caso você não queira instalar um por um. Eu prefiro instalar, e acho mais seguro também.


Indico o site W3Schools para acompanhar as estatísticas dos navegadores mais usados.



;)

06 junho 2008

Calendários de Junho Smashing Magazine

Mil anos depois de atualizar o blog, só um link porque é uma coisa rápida mesmo.. he


Todo mês no site Smashing Magazine são colocados alguns wallpapers para os usuários fazerem o download.


No mês passado eu mandei um meu, e está lá. Dêêm uma olhadinhaa!!! ^^


ps.: Não estou atualizando o blog por falta de tempo, já que era no trabalho que eu atualizava. Mas já tenho algumas idéias para os próximos posts, então: "POR FAVOR NÃO ME DEIXEM.... *__*" hehe



;)

29 maio 2008

Como enlouquecer um designer

Recebi esse e-mail hoje e achei o máximo!! Ri demais!


Resolvi compartilhá-lo com vocês para que riam junto. Concordo que tudo me irritaria fácil, e antes de chegar no último passo eu teria matado o cliente. ¬¬


Não veio com o autor e estou com preguiça e sem tempo de olhar no Oráculo. Então se alguém souber posta nos coments.


XD


Como enlouquecer um designer


1. Microsoft Office
Quando você tiver que mandar um documento para um designer gráfico, certifique-se que ele foi feito com algum programa do Office. Versão PC se possível. Se você tiver que mandar figuras, você terá mais chances de enlouquecê-lo; ao invés de apenas mandar um jpeg ou um raw de câmera digital, insira as figuras em um arquivo de Office como o Word ou Powerpoint. Não se esqueça de baixar a resolução para menos que 72 dpi, assim eles terão que contatar você novamente para pedir uma versão com a qualidade melhor. Quando você mandar a versão 'melhor', certifique-se que o tamanho seja no mínimo 50% menor. E se você estiver enviando as figuras por e-mail, esqueça de anexá-los de vez em quando.


2. Fontes
Se o designer gráfico escolher Helvetica, peça Arial. Se ele escolher Arial, peça Comic Sans. Se ele escolher Comic Sans, ele já está 50% doido, então seu trabalho está 50% pronto.


3. Quanto mais melhor
Suponhamos que você precise de um designer para um jornal. Designers gráficos vão sempre tentar deixar espaços em branco em qualquer lugar. Margens largas, o alinhamento, o kerning do texto, etc. Eles vão dizer que eles fazem isso para facilitar a leitura e manter um visual limpo e profissional. Mas não acredite destas mentiras. Eles fazem isso para deixar o documento ainda maior, com mais páginas, e isto lhe dará mais prejuízos com a gráfica. Por que eles fazem isso? Porque designers gráficos odeiam você. Eles também comem bebês. Sem cozinhar, carne de bebê crua.

Então certifique-se de lhes pedir para colocar margens menores e um texto muito muito pequeno. Diferentes tipos de fonte também são uma boa pedida (e você ganha bonus se pedir Comic Sans, Arial ou Sand). Peça clipart. Peça muitas figuras (se você não sabe como mandá-las, veja o item 1). Eles vão tentar argumentar e defender as escolhas deles mas não se preocupe, no final, o cliente está sempre certo e eles irão acatar todos os seus pedidos.


4. Logos
Se você tiver que mandar um logo de um projeto particular para um designer gráfico, de um patrocinador ou parceiro por exemplo, certifique-se de que ele seja realmente pequeno e um gif ou jpeg de baixa resolução. Novamente, você ganha pontos se inseri-lo em um documento Word antes de mandá-lo. Agora você deve estar pensando que isto tenha sido suficiente mas se você quiser mesmo abalar a estabilidade mental de um designer gráfico, dê o seu melhor e mande uma versão do logo com um fundo que dificulte o seu recorte. Fundos pretos ou brancos devem ser evitados, já que são facilmente cortados com um layer style mais escuro ou mais claro no photoshop. Uma vez que o designer gráfico estiver trabalhando em um logo bitmap, diga-lhe que você precisa dele maior.

Se você precisa de um logo customizado, faça os seus próprios rascunhos em um guardanapo. Ou melhor ainda, deixe seu filho de 9 anos desenhar isso. Seu rascunho não pode demorar mais que 5 minutos para ficar pronto. Você não quer algo detalhado e fácil de ser entedido, porque quanto menos um designer entender o que você quer, mais mudanças ele terá que fazer no futuro. Nunca aceite o primeiro logo. Nunca aceite o nono, faça-o fazer várias mudanças, cores, fontes e clipart. Peça-lhe para adicionar uma foto no logo. Cantos. Gradientes. Comic Sans. E quando ele estiver em sua décima tentativa, diga-lhe que você gostou mais da segunda. Eu sei, isso é cruel, mas lembre-se: designers gráficos são a causa do câncer de mama entre as mulheres de meia-idade.


5. Escolhendo suas palavras
Quando estiver descrevendo o que você quer para um designer, certifique-se de usar termos que realmente não signifiquem nada. Termos como 'jazz it up a bit'* ou 'poderia tornar isso mais webístico?'. 'Eu gostaria de um design bonito' ou 'Eu prefiro gráficos legais, gráficos que, você sabe, quando você os vê você diz: esses são gráficos legais.' são outras opções.

Não se sinta mal com isso, você fez a coisa certa. De fato, é a sua obrigação porque todos nós sabemos que em noites de lua cheia, os designers gráficos se transformam em lobisomens.


6. Cores
A melhor maneira para escolher as cores (porque você não quer deixar o designer gráfico escolher) é escrevê-las randomicamente em pedaços de papel, colocá-los em um chapéu e sorteá-las. O designer gráfico irá sugerir que você fique com 2 ou 3 cores no máximo, mas não. Escolha quantas cores você quiser e certifique-se de fazer o sorteio no chapéu na frente dele. Enquanto fizer isso, cante uma música bem chata.


7. Prazos
Quando for a sua vez de aprovar o design, relaxe. Não há pressa. Espere dois dias. Mais seis. Conforme o fim do prazo for chegando, contate o designer com mais correções e mudanças que ele tenha tempo para fazer.

Afinal, os designers gráficos são responsáveis pelos ataques do 911* (ou 190 aqui pro Brasil-sil).

EDIT: para não mudar o texto, esse 911 é na verdade sobre o 11 de setembro


8. Acabe com ele
Depois de aplicar todos os itens desta lista em sua vítima, faz parte da natureza humana (embora alguns irão argumentar se eles são humanos ou não) ficar um pouco inseguro. Conforme ele for percebendo que não pode satisfazer suas necessidades, o designer gráfico irá abandonar todas as suas esperanças de vencer uma discussão e irá fazer só o que você disser para ele fazer, sem questionar. Você quer aquilo em roxo? Então é roxo. Seis fontes diferentes? Claro!

Nesta altura dos fatos, você deve estar pensando que venceu, mas não se esqueça do seu objetivo: ele tem que desistir desse negócio. Então esteja pronto para o golpe final: Quando estiver em suas decisões finais sobre cores, formas, fontes, etc, diga-lhe que está desapontado com a falta de iniciativa dele. Diga-lhe que afinal de contas, ele é o designer e que ele deveria ser o cara que coloca sua experiência e seu talento no trabalho, não você. Que você estava esperando mais soluções e avisos sobre o design dele.




ps¹.: Obrigada Zoh pelo e-mail.. ri muito! xD

ps².: Odeio Comics Sans ¬¬



;)

28 maio 2008

Convite para conhecer a W3C Brasil


A W3C, empresa de padronização web, está convidando "todo mundo" para o lançamento do seu escritório no Brasil dia 4 de junho em São Paulo.


Desde novembro do ano passado possuiam o escritório mas só agora vão formalizar.


No site da W3C Brasil pode ser feito o credenciamento e visualizar a agenda com a progamação, além de outros detalhes como endereço, horário etc.


E o melhor: entrada gratuita!



;)

16 maio 2008

The Photoshop Anthology: donwload completo!!


A Sitepoint disponibilizou para download GRATUITO um pdf do livro THE PHOTOSHOP ANTHOLOGY: 101 Web Design Tips, Tricks & Techniques, completo com quase 300 páginas. O arquivo está disponibilizado agora, vai ficar lá por tempo limitado. Então anda logo e baixa um para você, dei uma passada de olho rápido, e o conteúdo é muito bom, tanto para quem está começando quanto para os photoshopers de longa data!


Enjoy!!!!



;)

Meus brushes favoritos no Photoshop

O post de hoje é fora do CSS. Já fiz muito artigo.. he. Vou dar só uma pausa neles.


Esse artigo é uma lista dos meus brushes favoritos. Aqui eu coloquei só trinta e três, mas deve ter pelo menos uns 50. A maioria eu peguei no search do deviantART, e sempre que preciso de mais o primeiro lugar que eu visito é lá.


Se eu baixar novos eu posto aqui para vocês. ;)


Só mais uma coisa, esse artigo eu fiz para uma nova amiga que vive falando que não entende os artigos de CSS, Silvia: olha, tutorial não vai dar não, mas pelo menos uns brushes eu te recomendo!!!! ;)


Visitem a minina no deviantART dela (que tem montagens ótimas) e no seu blog.



                                                                




ps.: A maioria dos brushes são compatíveis só com as versões acima do Photoshop 7.



;)