Olá, Fireworkseiros de plantão!

Andei um pouco sumido devido estar lançando meu novo curso on-line Criação de Sites Profissionais, que, modéstia à parte, está muito bacana. E a turma, muito participativa e estimulante.

Tirando a “rasgação” de seda, vamos ao trabalho…rsrs

Bom, neste tutorial, mostrarei como criar uma capa de revista com o nosso velho, versátil e poderoso Fireworks.

Pré-Requisitos

• Facilidade quanto ao manuseio do Adobe Fireworks CS3 / CS4 / CS5
• Download das fontes:  Harabara / Amerika Sans / Paskowy
• Download das imagens: Orange Tunnel /Textura / Hands 2:OK

Objetivo

Criar uma capa de revista utilizando o Fireworks CS5

Resultado Final

Conteúdo

1º Passo – Definir as Configurações do Documento

Vamos criar um novo documento com as dimensões de uma revista real, mais ou menos, do tamanho de um papel A4 (21.0 x 29.7 cm).

Fig. 01: Configuração do documento

Perceba que, em pixel o documento fica enorme. Então, para efeito deste tutorial, diminuirei a imagem em 4 vezes, ficando com as dimensões 620 x 894 pixel.

Outro detalhe é quanto à resolução. Como será um arquivo que será impresso, utilizaremos a resolução 300 pixel/Inch  (quanto maior o valor, melhor a qualidade para a impressão). Se fosse um arquivo específico para a web, deixaríamos para 72 pixel/Inch.

2º Passo – Inserindo as Linhas de Corte

Para quem trabalha com o Indesign, Corel, PageMaker e outros editores gráficos voltados para impressão, sabem bem mais que eu, da importância das linhas de corte, também chamadas de “sangria” (se eu tiver errado, por favor, me corrijam ;)). A grosso modo, é onde a arte será cortada pela lâmina da máquina da gráfica.

Isso significa que, dentro desta área é o que temos certeza que será impresso, tudo bem?

Para isso, vamos utilizar as linhas-guias. Lembrando que as réguas devem estar visíveis (Ctrl + Alt + R ou menu View > Rulles).

Fig. 02: Linhas-guia

Vamos colocar as linhas com a distância de 20 pixel que equivale a 7 mm, em todos os lados.

Primeiro, clique sobre a régua, segure e arraste para a área do desenho e depois, solte. Faça isso duas vezes na horizontal e na vertical.

As posições serão no eixo X: 20px e 600px | eixo Y: 20px e 874px.

Caso tenha dificuldade, basta inserir as guias e dar dois cliques sobre cada uma delas, determinando em seguida, seu posicionamento.

Fig. 03: Posicionamento das guias

3º Passo – Organizar Camadas (Layers)

Bom, particularmente, gosto de deixar todos os layers organizados, pois nunca se sabe se você irá compartilhar com alguém este trabalho ou, até mesmo, fazer uma atualização. Isso porque, fica bem mais fácil e rápido de encontrar todos os elementos do desenho.

Então, inicialmente, dividi o projeto em 3 partes: topo, conteúdo e rodapé.

Então, vamos criar as pastas como na imagem.

Fig. 04: Organização dos layers

Se por ventura, necessitemos de mais algumas, sem problemas – basta inserirmos nos devidos lugares.

4º Passo – Topo: Background

Vamos criar um fundo para o topo e prepará-lo para receber o logotipo da revista, a machete e os dados da edição, etc.

Criemos então, um retângulo nas dimensões 620 x 175 px, com preenchimento #212121. Como efeito gradiente, coloquemos o seguinte:

Fig. 05: Efeito gradiente no topo

5º Passo – Topo: Logotipo + Textos Adicionais

Vamos ver como é simples criar um logotipo para nossa revista utilizando apenas uma combinação de fontes, cores e posicionamentos.

Fig. 06: Criação do logotipo da revista

Simples, não?

E, complementando com a edição e endereço do site da revista, teremos, até aqui, o nosso topo prontinho:

Fig. 07: Resultado final do topo

6º Passo – Criando o Background da Revista

Criemos agora um retângulo com as dimensões 620 x 620 pixel e apliquemos o seguinte efeito:

Fig. 08: Backgorund, primeira camada.

Em seguida, insiramos a imagem Orange Tunnel sobre este retângulo verde (diminuí o tamanho em 50%) e apliquemos o filtro Stamp.

Fig. 09: Background, segunda camada.

E para arrematarmos o fundo da capa, aplicaremos uma textura.

Fig. 10: Background, terceira camada.

E o nosso resultado até aqui é este:

Fig. 11: Resultado parcial do background da revista

7º Passo – Inserir a Imagem de Capa

Nossa imagem principal, a que será destaque em nossa capa, será a Hand 2. O detalhe aqui é que colocaremos nas pastas da camada TOPO, ok?!

Vamos retirar o fundo branco da imagem para encaixá-la melhor na capa.

Existem várias técnicas, mas vamos usar a mais rápida delas, apesar de não ser tão precisa.

Com a varinha mágica (Magic Wand tool), configuremos como na imagem abaixo e, em seguida, devemos clicar no fundo branco e, pelo teclado, DELETE para excluir o fundo.

Fig. 12: Retirando fundo com Magic Wand (Varinha Mágica)

Reparemos que existe uma área a ser editada ainda. Para isso, usando as configurações da Borracha (Eraser), removemos isso facilmente:

Fig. 13: Retirando as sobras com Eraser tool

E o resultado da inserção e tratamento da imagem, deve ficar assim:

Fig. 14: Resultado parcial da capa

8º Passo – Inserir Manchete da Capa

Como sabemos, toda capa de revista, jornal, livro tem uma chamada principal, um texto que dá destaque ao principal assunto a ser tratado naquela edição. É o que os jornalistas chamam de MANCHETE.

Então, vamos à ela:

Fig. 15: Inserção da manchete de capa

9º Passo – Inserir os textos secundários

E, para complementar a nossa capa de revista, outros temas em destaque, com menor ênfase que a manchete, também comporão nossa arte gráfica.

Fig. 16: Inserção dos textos secundários

10º Passo – Rodapé

E, para finalizarmos, vamos completar o rodapé da revista. Neste caso, colocaremos alguns logotipos e o código de barras.

Fig. 17: Rodapé da revista

Pronto!

E eis o resultado final:

Fig. 18: Resultado final

Download

É isso aí, até a próxima.

CarlosHPS Webdesigner

Webtutoriais:1218EA5C

Olá, pessoal

Não é de hoje que o navegador Google Chrome vem se destacando pela sua leveza e funcionalidades. Para profissionais de web, assim como a gente, muitos recursos como extensões, são cada vez mais difundidos.

Sou usuário fiel do Firefox devido a inúmeros fatores, mas ignorar o IE e o Chrome e suas evoluções, seria imaturo.

Enfim, abaixo relaciono 5 extensões que não podem faltar neste navegador.

01 – Eye Dropper

Uma ferramenta bacana para capturar as cores da tela ou criar combinações.

02 – Aviary Screen Capture

Uma extensão para capturar telas com opções de edição bem interessantes. Vale apena instalá-lo com certeza, principalmente para quem trabalha com tutoriais.

3 – IE Tab

Uma extensão que adapta o navegador para exibir páginas através do Internet Explorer. Bom para testarmos o nosso CSS, não é verdade?

4 – CSSViewer

Um bom visualizador de CSS

5 – Resolution Test

Uma extensão que possibilita visualizarmos sites em várias resoluções de tela.

Até a próxima.

CarlosHPS Webdesigner

Pessoal,

É com imensa alegria e satisfação que venho divulgar o resultado do sorteio das bolsas do 1º Concurso “Meu Curso Online” – para o curso de Criação de Sites Profissionais.

Parabéns aos participantes!

Mas fiquem espertos, pois o sorteio acabou, mas o concurso continua.

Ainda há tempo de vocês conseguirem até 50% de desconto, sabiam?

Acessem o site do concurso e participem:

www.carloshps.com.br/criasites

Espero por vocês.

CarloHPS Webdesigner

Olá, pessoal

Finalmente, atendendo a vários pedidos, estou abrindo hoje as inscrições para o meu curso online:

Criação de Sites Profissionais

Conhecer e trabalhar com ferramentas, aplicativos e softwares para desenvolvimento de sites, com certa dedicação, torna-se fácil e até mesmo trivial. No entanto, o diferencial dos bons desenvolvedores é associar tal conhecimento técnico a diversos conceitos de design, cores, tipologia, iconografia, gerenciamento, publicidade, etc.

Aliado a isso, no curso Criação de Sites Profissionais mostro muitas ações e atitudes que são utilizadas na prática, no dia-a-dia de um profissional da web, ou seja, uma boa parte da minha experiência como Webdesigner (que se estende há 10 anos) são expostas no curso.

Sabendo destes detalhes preciosos foi que este curso em 4 módulos essenciais para quem deseja ingressar no ramo de desenvolvimento web:

Módulo 1: PLANEJAMENTO

• Briefing
• Técnicas de pesquisa
• Propostas e contratos
• Orçamento – quanto vale seu trabalho?
• Levantamento de conteúdo
• Wireframe

Módulo 2: TABLELESS

• Resumo geral sobre HTML
• Conceituação de [X]HTML
• Padrões W3C
• Resumo geral sobre CSS
• Técnicas gerais de construção de sites com Tableless
• Criando layout de 1 coluna
• Criando layout de 2 colunas
• Criando layout de 3 colunas

Módulo 3: DESIGN WEB

• Conceitos gerais de design para web
• Cores
• Tipografia
• Iconografia
• Formatos
• Tipos de sites
• Criando layouts com Fireworks

Módulo 4: IMPLANTAÇÃO

• Como converter layouts PNG em [X]HTML/CSS
• Montagem de um site completo
• Conceitos gerais de SEO – Otimização em Sistemas de Busca
• Cadastrando sites em servidores
• Registro de domínio .BR
• Transferindo arquivos via FTP do seu computador para um servidor web

1º Concurso “Meu Curso Online”

No intuito de divulgá-lo e ao mesmo tempo, estimular os interessados em cursá-lo, lanço também o “1º Concurso ‘Meu Curso On-Line’”.

Esta ação premiará os participantes do concurso a bolsas de até 100%, ou seja, possibilitando realizar o treinamento DE GRAÇA.

Gostou?

Então acesse agora:

www.carloshps.com.br/criasites

Aguardo por vocês.

Grande abraço.

CarlosHPS Webdesigner

Oi, pessoal

Fazendo uma varredura na internet em vários sites do ramo de desenvolvimento para web, revistas especializadas e livros, fiz uma seleção de algumas extensões (add-ons) do Firefox que são essencialmente indispensáveis para nós, webdesigners e webdevelopers. Publicarei de 5 em 5, ok?!

Confiram a seguir:

01 – Web Developer

Na minha humilde e simplória opinião, este complemento sempre deve estar ativo para profissionais da web como a gente. Ele é um verdadeiro “canivete suiço”. Com ele podemos fazer validações, verificar códigos html, css; scripts em javascript; paleta de cores, informações sobre imagens. Sen-sa-ci-o-nal.

02 – FireFTP

Solução definitiva para manipulação de arquivos em servidores web. Com ele podemos enviar e baixar arquivos diretamente dos nossos servidores e clientes.

03 -ColorSuckr

Deseja extrair as cores de uma imagem, um logotipo e montar uma paleta em um só clique? Pois é, isso é possível com este add-on.

04 – GridFox

Este complemento é bastante interessante. Ele cria uma grade sobre qualquer site, podendo assim, termos uma boa visualização sobre o posicionamento dos elementos que o compõe.

05 – FireShot

Esta é uma das extensões que mais utilizo. Além da possibilidade de capturar qualquer tela do navegador, ainda nos possibilita enviar, editar e criar sobre a imagem capturada, por e-mail ou salvá-la no computador. Bom para fazer manuais e tutoriais.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Dando prosseguimento à série Documentos Essenciais para Freelancers Web falarei neste artigo sobre a importância da utilização de propostas e contratos para profissionais freelancers como a gente e, quando devemos ou não, utilizá-los.

É importante que vocês tenham visto as matérias anteriores antes de prosseguirem com sua leitura:

1. Documentos Essenciais Para Freelancers Web: Parte 1 – Briefing
2. Documentos Essenciais Para Freelancers Web: Parte 2 – E-mails

A Necessidade

No mundo dos profissionais freelancers, o empreendedor precisa assumir tarefas que, se fosse em uma empresa convencional, estaria a cargo de algum departamento específico, como o jurídico, por exemplo.

Estou falando sobre propostas e contratos.

Sei que para muitos estas palavras soam como pregos caindo sobre a cabeça, pois estamos acostumadas a trabalhar nosso lado criativo, nosso lado lógico e técnico e não, o burocrático.

Mas por que devemos emitir propostas e contratos?

Simples! São documentos que nos “protegem” legalmente. Com eles, as partes envolvidas (contratante e contratado) sabem exatamente quais seus direitos e deveres. Sem esquecer que, para nós, desenvolvedores web, lá constam também, tudo o que vamos fazer no projeto, qual tecnologia, prazos, cronograma, valores, formas de pagamentos, e etc.

O que não pode faltar em uma proposta?

Fazendo chuva ou sol, os itens indispensáveis e que são essenciais em uma proposta são:

1. Identificação da proposta
2. Apresentação geral da proposta
3. O projeto e seus objetivos
4. Metodologia de trabalho
5. Cronograma [prazos]
6. Valores e forma de pagamento
7. Considerações gerais
8. Contato

A seguir, comentarei sobre cada parte acima.

1 – Identificação da proposta

Obviamente, toda proposta tem um destinatário. Mas o detalhe é saber, exatamente, quem a receberá e se é esta pessoa que tem o “poder” de aprová-la ou não. Esta informação deve ser obtida no momento da execução do briefing, onde levantamos os dados da empresa e dos responsáveis pelo projeto.

Então, antes de emitir a proposta, solicitemos o nome do responsável a recebê-la, sem cargo e/ou função na empresa, seus contatos como telefone e e-mail. E, dependendo da situação, solicitemos também uma outra pessoa da empresa para que possamos enviar uma cópia para ela, garantindo assim a receptividade do documento.

Também é importantíssimo que uma cópia seja enviada para nós mesmos, para evitar que ouçamos a seguinte frase:

Por favor, ainda estamos no aguardo da sua proposta. Há interesse ou não da sua parte?

Já me ocorreu isso e não é nada agradável, principalmente quando você tem a certeza do envio.

Exemplo:

2 – Apresentação geral da proposta

Por muito tempo omiti essa parte nas propostas que eu elaborava por achar que o meu portfólio (www.carloshps.com.br) já dava todas as informações sobre quem sou e o que faço. No entanto, muitas propostas passam pelas mãos de diversas pessoas que não entraram na internet para ver meu perfil profissional.

Com isso, fazer um breve resumo do que a gente é especializado, formação técnica/acadêmica/estudantil e serviços oferecidos, não pode faltar.

Exemplo:

3 – O projeto e seus objetivos

Nesta seção da proposta a preocupação maior é ser bem claro e direto, mostrando ao cliente como será o projeto e quais os objetivos a serem alcançados. Outro ponto a constar neste momento, é o detalhamento do serviço e do conteúdo a ser gerado no projeto.

Pro exemplo:

É importante ressaltar ao cliente que as seções do item 2 são apenas sugestões baseadas no briefing, nas pesquisas e no próprio conteúdo cedido pelo cliente e, que podem sofrer alterações de acordo com sua necessidade. No entanto, ocorrendo isso, uma nova proposta será elaborada.

4 – Metodologia de trabalho

Neste momento devemos explicar ao cliente como é o nosso método de trabalhar para chegar ao resultado final. Eu gosto muito desta seção porque tem cliente que quer “atravessar os bois na frente do carro”, isto é, já quer ver resultados finais antes mesmo de passarmos pelas etapas iniciais.

Exemplo:

5 – Cronograma

Nesta seção devemos informar ao cliente o prazo de cada etapa e que, após a conclusão de uma, só seguimos em frente após sua aprovação, seja ela escrita ou via e-mail. Nada de confirmarmos pelo MSN, Skype, Telefone, pois, caso tenha algum problema, como provaremos que tal etapa foi aprovada ou não?

A questão da diagramação fica a critério. Eu prefiro tabelar, mas outro modo é listar mesmo.

ou

1ª Etapa – até 10 dias úteis

2ª etapa – até 15 dias úteis

3ª etapa – até 15 dias úteis

Prazo de entrega final: até 40 dias úteis

6 – Valores e forma de pagamento

Para muitos de nós esta é uma seção delicada. Ficamos na dúvida de quanto cobrar; se conseguiremos equilibrar nosso trabalho com o seu respectivo e justo valor. Mas enfim, não entrando neste mérito ainda (veremos na próxima matéria da série), o importante aqui é ser claro e objetivo.

Exemplo:

Na forma de pagamento, não esqueçamos JAMAIS de solicitar uma entrada para garantirmos o básico e iniciarmos com dedicação nosso trabalho.

Exemplo:

7 – Considerações gerais

Muita atenção nesta hora. Nesta seção devemos colocar tópicos referentes a direitos autoriais; uso de imagens gratuitas ou pagas; política de entrega de materiais solicitado ao cliente por nós; inclusão de impostos, para quem trabalha com nota fiscal; mencionar os juros por atraso no pagamento e o que mais acharmos pertinente.

Também é importante frisar que usaremos a marca do cliente e seu projeto como portfólio e o disponibilizaremos somente em nosso site profissional. Já tive problemas com empresas que se negaram e não deixaram colocar seus projetos em meu portfólio e, como nem na proposta e nem no contrato eu tinha mencionado isso, tive que acatar a decisão.

8 – Contato

E por fim, obviamente, devemos deixar os meios de contato da gente para que o cliente sabe onde e como nos encontrar. Se tivermos um escritório, o telefone faz parte. Mas eu evito passar telefones, pois a ideia e fechar tudo via web. Telefone somente em último caso e se o cliente insistir bastante.

Digo isso porque já acordei no meio da noite com um cliente querendo falar sobre uma ideia que teve pro projeto dele e outro desejando que eu atualizasse um banner. rsrs Parece brincadeira, mas acontece sim.

No entanto, fica a critério de cada um.

E-mail, site e MSN/Gtalk/Skype são de praxe.

Sim, mas e o contrato?

Bom, pessoal

A proposta é uma prévia do contrato, mas em 95% dos casos, os clientes preferem e seguem mesmo é uma proposta bem elaborada, que também tem seu valor legal.

Por isso, dependendo do caso, podemos detalhar ainda mais a proposta. Mas se percebermos que um contrato é imprescindível ou exigência do cliente, aí não tem jeito mesmo.

Modelo de Proposta

Eu elaborei um modelo básico de proposta para facilitar a vida, principalmente, de quem nunca utilizou.

No site do IFD vocês encontrarão diversos outros links de modelos de propostas e contratos. Inclusive, alguns itens inseridos nos exemplos, extraí do modelo de proposta cedida pela revista WebDesign, cujo arquivo também se encontra no IFD.

E para encerrarmos com chave de ouro, falarei na última matéria da série sobre como e quanto cobrar pelos nossos serviços.

Até lá.

CarlosHPS Webdesigner

Veja Também

Olá, pessoal

O artigo de hoje é mais um desabafo do que um simples post em si.

Eu fico impressionado e indignado o quão, boa parte de nós, não têm a preocupação em escrever e/ou falar corretamente nosso idioma. E o pior de tudo é a justificativa:

Sou da área de informática. Não preciso dessa ‘baboseira’ de português. Meu negócio é Photoshop!

Pra quê estudar português se vou ser programador?

Pessoal, eu não sou tão ruim, em comparação a muita gente, na hora de escrever meus artigos e tutoriais, mas o tempo todo tenho em mãos uma gramática e um dicionário, dando-me suporte, sanando-me as devidas dúvidas. É uma preocupação constante que virou hábito.

E eu não estou falando só de erros ortográficos não, mas de concordância(ainda lembram o que é concordância, não é? rsrs), de má formação de períodos, de frases. Os pensamentos escritos ou falados não têm início, nem meio e muito menos fim.

Acreditem ou não, mas já fechei negócio só pelo fato de fazer uma apresentação bem elaborada e bem escrita da minha proposta orçamentária à execução de um projeto web.

E este é um problema generalizado em nosso mundo tecnológico. Pior ainda: está impregnado no âmbito acadêmico também. É só olhar para o lado e ouvir um colega defendendo uma ideia, tentando argumentar alguma solução de determinado problema com o professor ou com a turma. Um desastre.

Para complicar ainda mais – e se vocês abrirem uma empresa? Saberão dirigir ordens aos comandados? Saberão se expressar corretamente, a fazer fluir facilmente a comunicação? E aí? Já pararam para pensar nisso? E numa concorrência licitatória? Como defenderá sua proposta?

Então, pessoal, se vocês querem se destacar, se diferenciar no mercado, além de toda a bagagem técnica que é obrigatória, dêem mais atenção e o devido valor à nossa língua portuguesa.

Dizem que somos aquilo que comemos, mas também, aquilo que falamos.

Bom, e como poderia deixar de ser, abaixo segue um arquivo de uma página só, contendo um “resumão” das principais mudanças da nossa língua portuguesa oriundas da reforma ortográfica, ok?! Este material foi preparado pelo portal G1.com através do professor Sérgio Nogueira.

Grande abraço e até a próxima.

CarlosHPS Webdesigner

Copie, mas Indique:Termos de Uso – Copyright

Olá, pessoal

Neste simples tutorial veremos como criar um efeito de sombreamento (text-shadow) para textos utilizando apenas o CSS em sua 3ª versão, ou seja, CSS3.

De acordo com o “mago” do CSS, o sr. “Maujor”, em seu artigo CSS3 – Sombras em textos, as Recomendações do W3C para as CSS2 lançadas em 1998  já previam a propriedade text-shadow destinada a obter um efeito de sombreamento em textos.

O ganho que os desenvolvedores para a web têm com mais esta propriedade do CSS3 é mensurável. Basta compararmos um efeito com sombra com uma imagem e um arquivo em folha de estilo.

Objetivo

Aplicar efeito de sombra utilizando o atributo do CSS3 text-shadow.

Pré-Requisitos

Familiaridade com o CSS

Utilização de navegadores atualizados (Firefox 3+, IE 7+, Safari 3+)

Conteúdo

1º Passo – Conhecendo a Propriedade text-shadow

A estrutura da propriedade do text-shadow é a seguinte:

Fig. 01: Atributos da propriedade text-shadow

O efeito blur e a sombra não são requisitos obrigatórios à propriedade. No caso da sombra, caso a gente omita, ela será gerada com a mesma cor definida para o texto.

2º Passo – Colocando em Prática

Para efeito de teste, façamos a seguinte página html e css, respectivamente:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CarlosHPS BLOG - Efeito text-shadow com CSS 3</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CarlosHPS BLOG</h1>
<h2>Como Criar Efeito Sombra com CSS</h2>
<h3>www.carloshps.com.br/blog</h3>
</body>
</html>

/***************************************
Desenvolvido por: CarlosHPS Webdesigner
[www.carloshps.com.br/blog]
para o tutorial "Como Criar Efeito Sombra com CSS"
Todos os direitos reservados
Versão 1.0 | 15/03/2010
Atualizado em:
***************************************/
body {
background-color: #474747;
}
h1, h2, h3 {
font-family: Tahoma, Helvetica, Arial, Sans-Serif;
font-weight: bold;
text-align: center;
}
h1 {
color: #222;
font-size: 35px;
text-shadow: 0px 2px 3px #555;
}
h2 {
color: #fff;
font-size: 50px;
text-shadow: 2px 1px 1px #222;
}
h3 {
color: #666;
font-size: 40px;
text-shadow: 0px 3px 8px #2a2a2a;
}

E como resultado, teremos:

Fig. 02: Resultado final

Então, ficamos por aqui, pessoal.

Grande abraço.

CarlosHPS Webdesigner

Olá, pessoal

Se vocês leram o post anterior: Documentos Essenciais Para Freelancers Web: Parte 2 – E-mails, viram que mencionei a criação de um tutorial para o Gmail, mostrando como criar modelos, assinaturas de E-mail para ele, correto? Então, vamos lá.

Pré-Requisitos

• Possuir uma conta no Gmail

Objetivos

• Criar alguma assinatura/modelos de e-mail no Gmail

Conteúdo

1º Passo – Habilitar o ‘Labs’ do Gmail

Já faz algum tempo que, nas contas do Gmail, versões ‘beta’, ou não, de API’s (Aplicações de Interface) se encontram disponíveis nas Configurações do e-mail do Google, chamados de LABS.

Para início de conversa, devemos ativar dois API’s:

Fig. 01: Ativação dos API's no LABS do Gmail

Uma terá a função de gravar as respostas predeterminadas. A outra, nos dá a possibilidade de inserirmos imagens do nosso computador ou da própria web.

2º Passo – Criação da Assinatura

Com a habilitação das API’s, vamos agora criar um modelo de assinatura. Para isso, devemos “simular” a criação de uma nova mensagem de e-mail e, sem colocar assunto, destinatário e afins, vamos sim, inserir um texto e/ou imagem no corpo do e-mail, como na gravura abaixo:

Fig. 02: Assinatura padrão

Neste exemplo é exibida a minha assinatura profissional, o qual respondo todos os meus e-mails. Mas é preciso gravá-la para poder reutilizá-la em todos os e-mails. Para isso, na barra de ferramentas do e-mail, devemos clicar em Respostas predeterminadas > Salvar > Nova resposta predeterminada.

Fig. 03 - Assinaturas salvas

Observem que eu tenho 4 assinaturas e vou criar pelo menos mais 3. Tudo isso para economizar digitação e otimizar nosso tempo.

3º Passo – Manipulação das Assinaturas

E para inseri-las no corpo do e-mail, é só clicarmos em Respostas predeterminadas, escolha a assinatura e clicar sobre ela. Simples, direto e eficaz.

Para editar alguma assinatura, é só repetir o primeiro passo e depois salvar com o mesmo nome da atual.

E para excluir é o mesmo processo, bastando escolhermos a assinatura na seção de exclusão.

Bom, por hoje é só pessoal.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Dando sequência à série de artigos Documentos Essenciais para Freelancers Web, mostrarei neste post o quão importante é termos vários modelos de e-mails no dia-a-dia de profissionais como a gente.

Mas antes disso, não esqueça de visualizar a matéria anterior:

1. Documentos Essenciais Para Freelancers Web: Parte 1 – Briefing

Visualizem a situação.

Você acaba de receber um pedido de orçamento do tipo:

Olá. Eu gostaria de fazer um site e preciso de um orçamento. Favor, se tiver interessado, entre em contato o mais breve possível.

Até aí, normal e tranquilo. Como você já leu minha matéria anterior Documentos Essenciais Para Freelancers Web: Parte 1 – Briefing basta responder o e-mail, anexar o briefing e pronto.

Obviamente, você caprichou no texto introdutório, de umas 3 a 5 linhas, explicando sobre o briefing, detalhando informações para que o orçamento do cliente seja bem claro e objetivo.

Contudo, a maré fica ruim e só 2 meses depois você recebe outro pedido de orçamento. Aí você se lembra que mandou um com um texto bacana, profissional e queria utilizá-lo novamente para “economizar” tempo.

Então, é aí que os problemas começam. Quem disse que lembramos para quem, ou qual dia ou até, qual email utilizamos para enviar o briefing de 2 meses atrás.

Eu sei, eu sei…

Ah, Carlos, basta fazermos uma busca interna na nossa caixa de emails enviados e pronto!

Tá, e se você excluiu e aí? Ou se você é que nem eu que recebe mais de 100 emails por dia? E a canseira e o tempo que se perde procurando este bendito e-mail?

É por isso que devemos ter salvos, vários modelos de e-mails com estas respostas para que otimizemos nosso tempos e padronizemos nosso trabalho, pessoal.

Veja alguns exemplos de modelos de respostas de e-mails que podemos usar de acordo com a situação:

Perceberam como podemos ganhar tempo com emails pré-prontos?

Bom, pessoal, no tutorial a seguir, mostrarei como criar e salvar alguns modelos de email utilizando o Gmail, ok?!

E na próxima matéria da série, falarei sobre Propostas e Contratos.

Até breve.

CarlosHPS Webdesigner

Veja Também