Depois de basicamente um ano distante do iMasters, estou voltando com mais um artigo sobre a evolução do mercado de trabalho.

Antes de começar o artigo, gostaria de ressaltar que grande parte do texto a seguir expressa uma opinião minha sobre formas de produção/atuação em meio a um processo de criação para internet e talvez não represente a opinião de demais profissionais do mercado de trabalho.

Quero abordar sobre uma troca de funções no processo de criação de qualquer projeto para internet, pois atualmente muita coisa se perde em um vai-e-vem de tarefas e às vezes acaba causando intrigas internas em grandes corporações.

Atualmente, o processo de criação de um site em grande parte das agências segue uma estrutura parecida com esta:

Claro que existem diferenças, este processo foi desenhado de forma linear, mas existem N variáveis no meio e 'vai-e-volta' de operações.

Em um processo deste tipo, qualquer setor pode se tornar o gargalo e atrasar o restante da produção, e acaba se tornando quase obrigatório um profissional sênior produzindo em cada setor, pois, caso contrário, acaba ocorrendo um retrabalho, atrasando projeto, estourando orçamento e etc.

Alguns possíveis problemas, que podem ser cumulativos

• O atendimento não soube passar o briefing para o papel
• O gerente de projetos não tem conhecimento técnico suficiente para fazer a documentação para produção
• A arquitetura de informação não foi pensada em padrões de HTML, SEO e componentes para programação backEnd
• A direção de arte não foi planejada para um funcionamento CrossBrowser e seguindo bons padrões de HTML, prejudicando o planejamento de SEO do projeto
• A programação backEnd não foi feita do modo correto devido a não ter uma documentação específica

Mas, verdade seja dita, quem é do mercado conhece o perfil profissionais, e devido a isso ocorre um círculo vicioso em muitas agências, como por exemplo:

1. Arquitetos de informação nem sempre têm conhecimento técnico, pensando muito em usabilidade e pouco em produção, e acabam esquecendo comportamentos importantes no projeto para produção do backEnd.
2. Programadores em grande maioria são preguiçosos e, se tudo não estiver bem documentado, vão deixar buracos em aberto no sistema, tendo retrabalho.
3. Designers querem o visual acima de tudo e acabam esquecendo coisas importantes no projeto, e se não tiverem limites para criação, acabam prejudicando o funcionamento e irritando os programadores, que voltam para o item 2 e também avançam para o item 3.
4. Se o layout do site não prevê todos os comportamentos, os HTMLers não vão produzir corretamente e vão colocar a culpa no Arquiteto ou no Designer que não fez a previsão disso.
5. O arquiteto vai reclamar que a documentação do Gerente de Projetos não veio completa e por isso ficou assim.
6. Com prazo e orçamento estourado, o gerente de projetos é cobrado pela diretoria e assim acaba pondo a culpa no atendimento, que não fez um briefing correto.
7. O atendimento chora pois não pode por a culpa no cliente.

Claro que eu fiz uma generalização GIGANTE, existem profissionais que não fazem isso. Mas infelizmente esta é a realidade em muitas agências.

O que emprego na minha empresa e proponho para alguns clientes, é um processo diferente, como mostro a seguir:

Pontos importantes deste processo

1. Aumenta o trabalho em cima do Arquiteto de Informação, tendo este que ser multidisciplinar, saber HTML, SEO e ter conhecimentos em lógica de programação backEnd, assim como ter familiaridade com conversar e entender clientes.
2. O gerente de projetos fica encarregado apenas de gerenciar o projeto (prazos, orçamento, processo interno e etc)
3. Com o HTML produzido diretamente com a arquitetura, o Diretor de Arte fica obrigado a seguir o padrão visual do wireframe (grade, padrões de tipografia) ajudando a parte de SEO.
4. Com o HTML feito antes, prevendo os comportamentos, a programação backEnd corre mais 'fluida', sem interrupções.
5. O tempo de produção do wireframe se torna um pouco mais demorado, mas reduz em 80% o tempo de aplicação da Direção de Arte no site.

Já apliquei este processo em alguns projetos e consegui reduzir o tempo de produção em até 60%.

O grande problema disso é conseguir mão-de-obra, conseguir profissionais multidisciplinares que conseguem segurar toda esta carga.

Na minha empresa, busco dar treinamento gratuito, antes mesmo de qualquer contrato. O custo de um funcionário com estas qualidades é mais caro, mas o processo acaba sendo acelerado e evita transtornos internos.

No meu caso, tenho um framework próprio que auxilia a fazer a arquitetura diretamente no HTML e o fechamento da documentação, agilizando ainda mais o processo, e isso até agora tem funcionado muito bem.

Sinto que o mercado precisa de uma pessoa com conhecimentos em frontEnd, backEnd e direção de arte no meio disso tudo, organizando a orquestra, porém muitas agências grandes hoje pregam funcionários 'ultra mega hiper' focados em uma função só e acabam ficando engessadas para mudar o seu processo interno.

Então deixo uma pergunta: eu posso projetar um carro, se eu não sei dirigir, não sei regras de trânsito e nem sei como um carro funciona?

Para finalizar o artigo, gostaria de agradecer a um patrocinador, que sempre me apoia na produção de novas matérias, a HostDime, uma das líderes mundiais em hospedagem de sites.

Estou contente pela boa receptividade que as colunas sobre HTML5 têm tido! A primeira, sobre a introdução do HTML5 no mercado, e a segunda, sobre tags para organização. No artigo de hoje vou focar em formulários, que particularmente é a coisa que mais detesto fazer em HTML. A divergência entre os browsers é muita, variando bastante alinhamentos e estilos aplicados. 

Lembrando que o manual completo sobre HTML5 é encontrado no site da W3C, sendo lá um material oficial. Quem quiser dar uma conferida em tudo, só acessar por este link .Qualquer dúvida podem entrar em contato comigo pelo meu site ou meu Twitter.

Vamos recapitular as principais funções que temos disponíveis no HTML hoje:

• Accept - Aceito em inputs do tipo FILE, porém muito pouco usado diretamente. Decreta os tipos de arquivos aceitos.
• Alt - Define um texto alternativo caso não tenha imagem, para inputs do tipo IMAGE.
• Checked - Usado para botões de seleção (checkbox e radio), permite deixar o botão selecionado.
• Class - Setamos um estilo para usarmos através do CSS, Javascript e outros fins.
• Disabled - Para desabilitar a edição de um elemento.
• ID - Setamos o nome do nosso elemento, para referenciarmos em nosso sistema.
• Maxlength - Definimos o número máximo de caracteres a serem digitados
• Name - Setamos um nome para o campo, podendo ser usado para validação ou outros meios de controle, além de ajudar em questões de SEO.
• Size - Número de caracteres, que na teoria deveria ser a quantidade de itens visíveis, mas que funciona mais como uma forma alternativa de setar largura.
• Src - Inputs do tipo Imagem, usado para setar o caminho da imagem.
• Tabindex - Definimos a ordem de importância do campo, quando o mudamos através da tecla TAB.
• Type - Usado em Inputs, para setarmos se é um botão, botão em forma de imagem, checkbox, radio e etc.
• Value - Determina o valor do campo (não é usado para Textarea, cujo valor fica interno na tag).

Peço desculpas se esqueci algum parâmetro, mas acho que todos entenderam as principais opções que temos hoje em formulários.

Agora, vamos partir para as novidades!

Antes de tudo, vou contar as boas notícias:

1. Será possível fazer uma validação diretamente por HTML
2. Será possível fazer máscaras diretamente por HTML
3. Será possível mencionar quais tipos de dígitos são aceitos no campo por HTML
4. Não serão mais necessários componentes para Datapicker (aqueles que aparecem o calendário quando você clica em um campo de data), o HTML5 faz isso automaticamente!

Além de várias outras funções que tendem a facilitar a nossa vida (ou talvez complicar ainda mais).

Agora veremos todos parâmetros "Types" novos que um INPUT pode ter no HTML5, e se ele é ou não compatível hoje (não considerei versões anteriores ao IE8).

Esses novos "types" que vão anular componentes externos que muitas vezes dão dor de cabeça nos projetos.

Testei nos seguintes navegadores/plataformas: Firefox 3.6.8, Opera 10.60, Chrome/Safari 5.0 e Internet Explorer 8.

Exemplo de como é usado: <input type="color" />

COLOR

• Compatibilidade atual: Nenhum dos browsers mencionados.
• Função: Exibir uma palheta de cores para escolha, como faz falta em muitos projetos! Às vezes é um bom trabalho para conseguir aplicar uma, quanto mais fazer.

DATE

• Compatibilidade atual: Opera.
  
• Função:  Abre um calendário para escolhermos uma data.

DATETIME

• Compatibilidade atual: Opera.
• Função:  Abre um calendário para escolhermos uma data e ainda podemos setar um horário.

DATETIME-LOCAL

• Compatibilidade atual: Opera.
• Função:  Abre um calendário para escolhermos uma data, também podendo setar horário. Mas agora nosso horário local, com fuso horário.

E-MAIL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
• Função: Teoricamente servirá para fazermos validação direto com o HTML5. Existem outros campos com esta finalidade.

MONTH

• Compatibilidade atual: Opera.
  
• Função:  Abre um datapicker para escolhermos mês e ano.

NUMBER

• Compatibilidade atual: Opera.
  
• Função: Será usado para validação também. No Opera tem diferenciação visual e não possibilita o usuário escrever outro caracter.

RANGE

• Compatibilidade atual: Chrome/Safari e Opera.
  
• Função: Abre uma espécie de 'régua' para podermos setar um valor, estilo pior/melhor.

TEL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
  
• Função: Será usado para validação, não achei muitas informações sobre. Vejo problemas nesse aspecto, devido a cada país diferenciar a quantidade de dígitos do número.

TIME

• Compatibilidade atual: Opera.
  
• Função: Um campo somente para setar hora-minuto.

URL

• Compatibilidade atual: Opera (ainda sem diferenciação visual).
• Função: Outro campo usado para validação, visualmente não tem diferenciação.

WEEK

• Compatibilidade atual: Opera.
  
• Função: Bem interessante, abre um campo para escolhermos ano e dia. Escolhendo o dia, ele armazena o ano e a semana.

Pela análise, ponto para o Opera! Ponto negativo (para variar) para o IE8 e, quem diria, Firefox. Queria ver funcionando o tipo COLOR, ver a palheta de cores sendo mostrada, mas infelizmente ainda não é suportado. Meu medo principal dessas tags é a personalização; fui tentar editar no Opera as tags equivalentes a data/hora etc. Algumas coisas não foram aceitas, consegui editar tamanho da fonte, cor da fonte (de algumas coisas apenas). Outros comandos não foram bem aceitos.

Veja:

Outros parâmetros novos (não ligados ao type).

Exemplo: <input parâmetro="valor" /> - <input autocomplete="on" />

Não vou passar todos parâmetros novos, pois são muitos e o texto ficará cansativo. Seguem alguns bem interessantes:

Autocomplete

• Valores: On, Off.
• Função: Não fique tão feliz com antecedência! Achei que era um autocomplete, de dar sugestões por usuário através de dados vindos de um banco ou semelhantes. Mas a real função dele é te dar a opção de escolha de o campo ser ou não lembrado. Por exemplo, eu digitar "email" em um campo de e-mail, e ele me mostrar o que já preenchi em campos do mesmo nome. Comando simples e que pode ser bem útil.

Form

• Valores: 'nome do formulário'.
  
• Função: Você pode concatenar o campo a um formulário específico, criando campos interligados.

Formenctype

• Valores: application/x-www-form-urlencoded, multipart/form-data, text/plain.
• Função: Pode setar um formenctype específico para um campo, anulando o "formtype" principal.

Formtarget

• Valores: _blank, _self, _parent, _top.
  

• Função: Após darmos a ação, onde que será aberto a nova tela.

Height

• Valores: % ou pixels.
• Função: Podemos definir uma altura por nossos campos, antes só era possível por CSS.

Max

• Valores: número máximo de caracteres.
  
• Função: Podemos setar um tamanho máximo de caracteres, uma espécie de Maxlength, só que é usado em combinação com o parâmetro MIN, para setarmos um tamanho máximo e um mínimo para o campo.

Min

• Valores: número mínimo de caracteres.
  
• Função: Número mínimo de caracteres que o campo deve ter.

Required

• Valores: required.
  
• Função: Podemos mencionar se este campo é ou não obrigatório.

Nota importante - é possível setar no CSS algo como: input:required e colocar um estilo nos campos obrigatórios.

Width

• Valores: pixels ou %.
  
• Função: Podemos setar uma largura em pixel ou porcentagem, não mais por número de caracteres.

Como percebemos, as novas funcionalidades para formulários são grandes! Existem diversos novos parâmetros para diversas outras TAGs, nos quais pouca gente se habitou 100% ainda. Mas, infelizmente, como percebemos também, poucos browsers hoje suportam, mas isso é uma questão de tempo (longo tempo).

Para finalizar, gostaria de agradecer à HostDime, que sempre me dá uma força enorme para produzir os artigos!

Espero que tenham gostado, até a próxima!

Fiquei feliz pela aceitação do artigo anterior e os bons debates que acabaram por surgir. Hoje darei início a uma coisa mais prática e menos teórica sobre o HTML5.

A primeira coisa que irei abordar são tags para organização e otimização em mecanismos de buscas (SEO), o que muda na estrutura de um site com os novos padrões de HTML.

Caso tenham alguma dúvida ou queiram conversar sobre o assunto, podem me encontrar no Twitter ou entrar em contato pelo meu site. Bem, vamos lá...

Estrutura Básica

Quando damos início à construção de um site em tableless, na estrutura básica, normalmente são utilizadas DIVs principais, como: topo/head, menu, conteudo/content/home/post, rodape/footer, coluna/sidebar/lateral e etc...

Exemplo que costumo usar:

<div class="topo">
</div>
<div class="menu">
</div>
<div class="conteudo">
</div>
<div class="rodape">
</div>

Costumo sempre usar a nomenclatura em português, para facilitar manutenções futuras por outros profissionais.

Com o HTML5, estas DIVs não serão mais necessárias. Teremos tags específicas para separarmos o nosso layout por partes. Que são elas: Header,  Article, Nav, Section, Footer e Aside.

As DIVs ficarão encarregadas apenas para posicionamento de conteúdo dentro de cada sessão e não mais para toda estrutura.

Exemplo de como ficará uma estrutura básica:

<header>
   <h1>Logotipo da Empresa</h1>
</header>
<nav>
   <ul>
      <li>Página Inicial</li>
      <li>Portfolio</li>
      <li>Contato</li>
   </ul>
</nav>
<article>
   <section>
      <h1>Nome da Notícia<h1> - Postado por <h2> Nome do Autor </h2>
      <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam,dictum in sagittis a,cursus
 sit amet enim. Nunc ante dolor, condimentum ut mattis eget, fringilla non urna. Nam ultricies
 dolor ac felis scelerisque rhoncus. Nunc varius velit ac nulla aliquet at ullamcorper tellus vehicula.
 Nulla tincidunt velit non tellus scelerisque vehicula. Praesent pellentesque aliquet arcu quis mattis.</span></p>
     <div class="fotos">
         <img class="fotoprincipal" src="imagem.jpg" />
         <ul>
            <li><img src="thumb01" /></li>
            <li><img src="thumb02" /></li>
            <li><img src="thumb03" /></li>
         </ul>
     </div>
   </section>
</article>
<aside>
   <h1>Conheça a Empresa</h1>
   <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam, dictum in.span></p>
   <h1>Assine Nossa Newsletter</h1>
   <p><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio quam, dictum in.span></p>
</aside>
<footer>
   <h2>Copyright  - Todos os Direitos Reservados</h2>
   <h1> Nome do Site </h1>
</footer>

Agora, vamos entender melhor o que fizemos:

• Header: topo/cabeçalho do nosso site. Como padrão, hoje ele costuma ter o logotipo da empresa e informações normalmente fixas.
• Nav: vem de navegação, seria para onde você pode ir/vir. Seria bacana se tivesse algum modo de vincular o link no elemento NAV com algum ARTICLE específico, fazendo no próprio HTML o comando de "menu ativo", não acham? Pelo que pesquisei e testei, não é possível. Mas vamos ver em futuras atualizações.
• Article: seria o nosso conteúdo dinâmico, content/post. Dentro dele teríamos o conteúdo daquela página, dividido em sessões.
• Section: as sessões dentro do Article, por exemplo, dentro da home temos sessões de: Notícias, Eventos, Galeria de fotos. É importante ressaltar que cada section pode ter um footer e um header próprio.
• Aside: uma terceira coluna, com informações complementares ao conteúdo dentro do Article.
• Footer: o rodapé do nosso site, onde normalmente vão os Copyrights, quem fez e menu secundário.

Veja nesta ilustração como seria dividido hoje um site com estas tags:

Observações importantes:

- Tags seqüenciais, como por exemplo de Títulos (h1, h2, h3, h4, h5 e h6) se adequarão automaticamente dentro de cada section, header, footer, nav e semelhantes. Sempre houve a preocupação com estas tags, agora você pode tratá-las a partir de cada sessão, e tanto o navegador como o mecanismo de busca irão se virar para fazer uma leitura correta do site, dando uma ordem de importância certa para os títulos.

- As DIVs não irão 'sumir', serão usadas mais para alinhamentos internos, como demonstrei no exemplo anterior, com a div "FOTOS". Servindo para posicionar os conteúdos dentro dos elementos principais.

Dúvidas, medos e preocupações

Na teoria são tudo mil maravilhas, mas e na prática? Serão novas TAGs para nos preocuparmos na hora de fazer um site crossbrowser.

Como será o comportamento destas tags? Elas aceitarão comandos de alinhamento, margens, bordas e etc? Alguns IEs mais antigos lêem de forma diferente alguns elementos, não aceitam HOVER, nem espaçamentos em alguns outros. Espero que isso não ocorra com estas tags e que sejam flexíveis em questão de estilização e posicionamento, em todos os browsers.

Já até imagino sites assim:

<div class="alinhamentoMenu">
    <nav>
    </nav>
</div>

Ou:

<nav>
    <div class="bordaMenu" style="width:100%; height:100%">
    </div>
</nav> 

Fazendo isso para corrigir problemas em alguns browsers. Espero realmente que isso não ocorra e que estas TAGs funcionem como devem funcionar.

Chega de milhares de DIVs para organização, dependendo de quem estruturou fica uma bagunça, ainda mais quando tem ajustes nos projetos, que o nome de cada DIV não condiz mais com sua função. Agora teremos o site devidamente separado!

Espero que tenham gostado do artigo, dentro de alguns dias falaremos sobre formulários em HTML5!

Vale a pena um agradecimento especial para a HostDime, que tem me dado um apoio gigantesco para produção destes artigos e apoiado o uso de novas tecnologias no mercado.

Para começar, algumas perguntas básicas sobre HTML5 que rolam por aí:

• O HTML5 é viável hoje? A resposta é, infelizmente, não. Para um público extremamente seleto talvez seja um pouco viável, mas, mesmo assim, nenhum browser (até mesmo os mais conceituados) suporta o HTML5 com tranqüilidade, apenas algumas tags são aceitas.
• O HTML5 vai extinguir o Flash e/ou o Javascript? Não. O HTML5 busca reduzir o uso de Javascript, deixando seu uso para o que é realmente necessário. Assim também para o Flash, que vai ficar encarregado de aplicativos para interatividade - e, na minha opinião, é para isso que ele deve ser usado.
• O HTML5 vai entrar rápido no mercado? A resposta também é, infelizmente, não. Tomara que eu esteja muito errado, mas estava conversando com alguns colegas de trabalho e fazendo uma média de tempo que o usuário leva para se atualizar, e nossas conclusões foram tristes. O Internet Explorer 6, um grande causador de problemas hoje, existe desde 2001. Apenas em 2010 as gigantes da internet tomaram providências a respeito e, mesmo assim, a versão 6 do IE ainda possui muitos usuários. Tudo bem que isso tem o mérito de o Windows Vista não ter tido o sucesso esperado e muitos usuários continuarem no Windows XP, que tem o IE6 como padrão, mas foram nove anos para ele finalmente começar a ser ignorado.

Os atuais navegadores não suportam com perfeição  o HTML5; provavelmente browsers como Firefox, Opera, Chrome, Safari e outros, serão atualizados rapidamente suprindo estes problemas. Mas o nosso bom e velho IE (o navegador mais usado no mundo) é complicado, sendo que ele ainda nem suporta comandos como borda-arredondada (border-radius), obrigando a usar 'soluções alternativas'. O Internet Explorer 9 está tendo boas resenhas, deve sair em um ou dois anos, acredito eu. Mas vai demorar quanto tempo para grande maioria dos usuários migrarem de vez para browsers com este suporte? Provavelmente uns bons anos...

O trabalho para sites vai acabar sendo redobrado, pois os clientes vão querer um site com novas tecnologias, mas também será necessário oferecer suporte para navegadores antigos, como foi muito tempo com o IE6, e talvez seja até mais trabalhoso, pois não usaremos somente hacks para navegadores, e sim versões diferenciadas de HTML e CSS para dar este suporte.

Ainda, com a popularização de Tablets e 'mega-celulares', versões diferenciadas para esta finalidade também devem ser exigidas. Os usuários estão vindo de locais cada vez mais dispersos e atender à demanda vai resultar em ainda mais trabalho (navegadores antigos, navegadores novos e navegadores 'portáteis').

Nas próximas colunas, buscarei dar uma explicação sobre as principais novas tags do HTML, dividindo elas em quatro categorias, que são:

1. Otimização, organização e SEO
2. Formulário
3. Multimídia
4. Tags e parâmetros de "enfeites"

Caso queiram tirar umas dúvidas, jogar uma conversa fora ou dar sugestões sobre este assunto, podem me encontrar no Twitter (@ravielcarvalho) ou podem me mandar um e-mail pelo meu site.Valendo um agradecimento especial para a HostDime que vem incentivando o uso destas novas tecnologias. É bom ver empresas de grande porte fazendo sua parte para alertar o mercado destes novos padrões.

Mas vamos lá. Está cada vez mais comum empresas utilizarem o Twitter como SAC ou como um canal de promoções; é um método bem atraente para os consumidores, pois acaba sendo uma propaganda direta e eficaz. Uma outra coisa que tem acontecido também é que quando você cita uma instituição (principalmente falando mal), eles entram em contato para oferecer ajuda. Realmente faz com que o consumidor se sinta especial, mas isso funciona?

Analisei Twitter de seis empresas distintas, que utilizam o Twitter tanto como SAC, como um canal promocional. Com todos tive a oportunidade de interagir de alguma forma neste meio tempo e ter uma conclusão formada, assim já vemos qual 'receita' funciona bem no microblog.

@AloBradesco

Eu não tinha idéia que o  Bradesco estava no Twitter e foi realmente espantoso quando eles entraram em contato comigo, logo após eu fazer uma pequena crítica ao FoneFácil Bradesco. Foram super atenciosos, tiraram todas minhas dúvidas e não demoraram para responder minhas mensagens. Além disso, fizeram contato por telefone solucionando meus problemas. Foi um ótimo uso do Twitter, prometeram um suporte e conseguiram cumprir muito bem! Recomendo! Ponto Positivo!

@PagSeguro 

Com o Pagseguro a situação foi diferente. Um amigo estava perdido na hora de fechar um pedido e fez uma crítica ao sistema com a qual eu acabei concordando. O Pagseguro entrou em contato comigo (que concordei com a crítica) e nem falou com o meu amigo que estava com dificuldades (o que mostra que o sistema era automatizado). Demoravam dias para responder às mensagens de suporte e, mesmo eu pedindo para entrarem em contato com quem havia tido problemas realmente e precisava fechar um pedido, não entraram em contato com ele. Não me senti valorizado pelo programa, logo isso é um ponto negativo. Talvez, caso não houvesse este SAC no Twitter por parte deles, eu ainda teria uma boa visão sobre o sistema. Ponto negativo!

@NerdStore

O que falar da maior loja Nerd do Brasil? Alexandre Ottoni e Deive Pazos, conduzindo o melhor podcast do mundo, na minha opinião, fazem de maneira esplêndida o seu público se sentir próximo, como se fossem velhos amigos. Com o Twitter da NerdStore não é diferente. Um SAC extremamente bem efetuado, respostas rápidas e gentis que esclarecem o problema. Outro exemplo de Twitter que acaba dando certo, valendo atenção especial para Agatha e Andreia, que prestam um atendimento top de linha! Ponto Positivo!

@HDBR 

Existem várias empresas de hospedagem de sites no Twitter; algumas me fizeram me sentir somente mais um número e me perseguiam quando eu fazia alguma crítica. Com a HostDime foi diferente. Sempre que preciso de alguma ajuda, tenho e-mail e Twitter à disposição, consigo até mesmo conversar sobre promoções pelo Microblog, além de ter um contato próximo com toda a equipe, o que com certeza me faz sentir melhor, não sendo apenas um número. Quando uma empresa grande (como o Bradesco) consegue este feito, é sinal de serviço bem realizado! Ponto Positivo!

@Camiseteria

Um outro grande case. O Twitter da já famosa loja Camiseteria acaba tendo um foco mpar, não servindo apenas como SAC ou divulgação, e sim como contato com os fãs, que acabam se tornando amigos e efetuando uma troca de informação saudável. Quando é feita uma pergunta mais precisa, os próprios responsáveis pela loja entram em contato com você. Ponto positivo!

@RevistaMad 

A velha MAD esta de volta! Com um humor único e totalmente desprezível, fazem uma boa divulgação no Twitter, utilizando uma psicologia reversa que acaba funcionando (nem sempre). Fazem você se sentir mais à vontade para falar no Twitter e sempre aceitam bem as críticas. O único ponto negativo é que às vezes acontece um exagero de mensagens repetitivas e cansativas, mas faz parte do 'espírito' da revista. Ponto neutro para eles!

Acho que o Twitter está sendo muito bem usado por várias empresas, mas acho errado estar no Twitter sem ter estrutura para fornecer o suporte que promete. Gostaria de ouvir a opinião de vocês, usuários, sobre o assunto. Que empresas vocês conhecem que fazem um bom trabalho usando o microblog? E quais vocês acham que precisam melhorar? 

Este artigo foi dividido em duas partes. Nesta primeira conheceremos as ferramentas e, na segunda, aplicaremos um exemplo prático com um site já existente.

Para começar, não deixe de ler os outros dois artigos sobre práticas de SEO já publicados:

Práticas de SEO no código

Práticas de SEO para imagens

Considerações Iniciais

Para se obter uma melhor prática e resultados com o SEO é imprescindível uma interação com o Google Analytics ou algum sistema de função semelhante. A partir desta interação, podemos levantar pontos importantes do projeto, não só de criação como de desenvolvimento. É necessário um layout planejado e sistema já devidamente adaptado para o Google Analytics conseguir ler o site de forma mais precisa.

Entendendo a Navegação do Usuário

Antes de começarmos uma análise de erros do aplicativo, é necessário desvendarmos e entendermos como o usuário navega no site. Desta forma descobriremos se o objetivo do projeto foi alcançado, se o produto Y está tendo o destaque planejado entre outras funcionalidades importantes. Para filtrar os resultados analisados é de grande valia conhecer o público alvo do cliente e saber se é realmente ele que está sendo atingido, como veremos mais detalhadamente dos próximos tópicos. Existem diversos dados importantes para levarmos em consideração, como:

• páginas de saída
• sites de referência
• mecanismos de busca
• links diretos
• porcentagens de cliques

Páginas de saída

Esta ferramenta é muito importante pois, a partir dela, podemos verificar quais as páginas mais rejeitadas pelo usuário. Podemos filtrar os resultados por navegador, sistema operacional, resolução do computador e etc. Ela é importantíssima para verificarmos incompatibilidades. Muitas vezes o usuário sai de uma página por um conteúdo ruim ou por incompatibilidade com o browser ou sistema. Por exemplo, se uma página especifica que 80% dos usuários que utilizam Internet Explorer 6 acabam saindo, provavelmente ocorre um tipo de incompatibilidade.

Esta ferramenta pode ser encontrada no Google Analytics em Conteúdo - Principais Páginas de Saída - Conteúdo - Conteúdo Principal

Sites de Referência

Outra ferramenta importante, com ela podemos ver a repercussão que o site está tendo na web. Podemos observar quantos visitantes vieram de links variados (redes sociais, banners, citações e outros sites). Caso o site seja citado, por exemplo, em um blog, indica quantos visitantes vieram daquele determinado endereço e podemos simular a navegação destes visitantes. Assim, podemos descobrir se os visitantes deste blog consumiram algo no site ou apenas visitaram, com isso podemos analisar se é válido investir em uma campanha neste site, se ela traria lucros de alguma forma.

Podemos no próprio Google Analytics criar links para campanhas específicas, que faz um filtro extremamente preciso de uma campanha na internet (de banners, por exemplo). Inserindo o link gerado em um banner, você pode analisar onde este banner foi citado e todo impacto que ele causou, filtrando apenas para esta determinada campanha (vendo onde ela foi citada, sites que referenciaram ela e etc).

Para ver e filtrar os resultados:

Fontes de Tráfego - Sites de referência

Como criar links para uma campanha específica:

http://www.google.com/support/analytics/bin/answer.py?hl=br&answer=55578

Mecanismos de busca

Outra ferramenta importante. É a partir dela que saberemos com que palavras os usuários estão chegando ao nosso site (a partir de buscadores) e em que palavras devemos investir. A métrica é bem simples, divide por navegadores e palavras buscadas. Por exemplo, 200 visitas vieram do Google após terem buscado pela palavra-chave "música". Com isso podemos analisar se a palavra comprada no AdWords foi válida e se existe alguma palavra necessitando uma maior atenção e investimento, não só em anúncios/adwords como em tags e planejamento básico de SEO.

Você encontra esta opção no Analytics em:

Fontes de Tráfego - Mecanismos de Busca

Links diretos

Uma ferramenta importante, porém muitas vezes 'enganadora'. Com ela descobrimos quantos usuários acessam o site diretamente (digitam o endereço no navegador, sem efetuar busca). De uma certa maneira, é possível visualizar a fidelidade do seu público, após o site se tornar conhecido e bem visitado; porém, para sites menores é um grande risco. Se o site recebe 100 visitas únicas por dia e 90 são links diretos, possivelmente o site esta com página inicial nos computadores da empresa. Casos como este são comuns de ocorrer.

Com esta ferramenta também podemos perceber uma futura queda no site, caso os usuários venham grande parte de links diretos e poucos de buscadores ou indicações. Nestes casos é necessário um maior investimento em SEO e campanhas ou mesmo uma reformulação de conteúdo. Para descobrirmos se este público que acessa diretamente é fiel e não usa o site apenas como página inicial, podemos observar a taxa de rejeição e tempo de permanência dele no site.

Você encontra no Google Analytics em Fontes de Tráfego - Tráfego Direto

Porcentagem de Cliques

Um aplicativo extremamente útil. Sabendo usá-lo, torna-se uma ferramenta poderosa para fazer um levantamento da navegação do site. Esta ferramenta acessa literalmente o seu site e exibe, com porcentagens e números de cliques, onde os usuários clicam ao entrarem no aplicativo. Com isso podemos simular uma navegação perfeita do usuário. Se acessarmos uma página específica, vai sinalizar como os usuários navegam nela. Assim podemos descobrir se o destaque planejado no layout esta realmente sendo eficaz ou descobrir um produto acessado que não tem a atenção merecida no site. As descobertas são inúmeras e varia de acordo com cada projeto. Para esta ferramenta, em especial, é de extrema importância o site estar bem diagramado e dentro das 'boas normas' de SEO, tudo auxilia muito na leitura do site.

Onde se localiza no Google Analytics: Conteúdo - Cobertura do Site

Considerações Finais

Estas são as principais ferramentas para entendermos como o usuário navega no site, lembrando que existem diversas outras, porém é importante entendermos como filtrar as informações necessárias e a partir disso tirarmos conclusões para aprimoramento do site em todos os sentidos, sistemas, layout e campanhas para divulgação.

Encerrando, gostaria de divulgar uma das maiores empresas de hospedagem do Brasil e do mundo, sempre apoiando profissionais da área de tecnologia e inovando no mercado! Parabéns também para toda equipe da Hostdime!

E quero aproveitar para parabenizar toda a equipe da FDD / EDGY onde trabalho, pelos inúmeros prêmios que conseguimos conquistar nestas últimas semanas! Com o site Banana Café, Chevrolet Agile, Lezanfan e tantos outros! Valendo um agradecimento especial para a AG2, grande parceira de projetos! Um agradecimento especial para todo o pessoal da equipe! Grande energia!

Para o pessoal que quiser conhecer outros leitores e usuários, adicionem no MSN mgroup47555@hotmail.com, sempre tem gente legal por lá! Caso queiram tirar alguma dúvida, estou à disposição noTwitter @ravielcarvalho e por vezes no mGroup!

Agradeço ao carinho dos meus leitores pelo último artigo e novamente ao meu amigo Rafael Comin, que já está escrevendo aqui para o iMasters, dêem uma conferida no artigo dele que vale muito a pena!

Antes de começar o artigo, gostaria de passar dois canais de comunicação que tenho com meus leitores, tanto para tirar dúvidas, quanto para conhecer gente nova. Quem quiser me seguir no Twitter, trocar algumas palavras, experiências ou mesmo tirar dúvidas: @ravielcarvalho. Também tenho um grupo no MSN, criado faz algum tempo, já possui centenas de leitores, sempre que quiser conhecer gente nova da área e conversar, só adicionar no MSN: mgroup47555@hotmail.com. Além disso tudo, usem também os comentários aqui!

Vamos lá!

Na hora de começar o desenvolvimento, é preciso ficar atento a alguns detalhes importantes, que ajudam a organizar e estruturar o site para os mecanismos de busca:

MetaTags

As metatags que são responsáveis por definir como será a exibição do seu site nos buscadores e são uma peça fundamental para um bom funcionamento. Elas precisam ser planejadas, levando em consideração vários pontos importantes.

Elas são caracterizadas pela tag META, devem estar dentro da tag HEAD e devemos ter pelo menos três delas em nosso código. O que vai definir a função de cada uma é o parâmetro NAME e o seu valor será dado pelo parâmetro CONTENT, como no exemplo abaixo:

<META NAME="nomedoparametro" CONTENT="descricao">

Existem três itens importantes que devem ser utilizados em metatags separadas, são eles: AUTHOR, DESCRIPTION e KEYWORDS. Estes itens devem ser aplicados no parâmetro NAME, como no exemplo abaixo:

<META NAME="author" CONTENT="descricao">
<META NAME="description" CONTENT="descricao">
<META NAME="keywords" CONTENT="descricao">

AUTHOR - Menciona o criador da página. Algumas vezes a melhor opção é deixar o nome do próprio cliente, pois vai fornecer um retorno melhor para ele. Em outros casos utiliza-se a agência responsável como criadora.

DESCRIPTION - É a descrição que vai aparecer na busca orgânica dos navegadores (resultados que não são pagos/patrocinados). Deve ser algo curto e direto, não passando de 260 caracteres.

KEYWORDS - São as palavras-chave do site. Utilizando muitas palavras, não significa que terá melhores resultados. O número de palavras varia de cada projeto, o aconselhável seria em média 5 palavras, separadas por vírgula. De alguns anos para cá o Google não aceita lê mais as Keywords em suas buscas, por serem usadas de forma irregular, mas outros buscadores menores ainda aceitam.

Exemplo:

<META NAME="author" CONTENT="HostDime">
<META NAME="description" CONTENT="Revenda de Hospedagem de Sites com cPanel e WHMCS, Hospedagem de Sites,Servidores Dedicados em Data Center Próprio. Streaming. Suporte 24horas."><META NAME="keywords" CONTENT="web, host, hospedagem, sites, revenda, servidores">

Também é interessante salientar que estas tags podem vir do banco de dados, como palavras mais colocadas pelo cliente ou semelhante. Como também podem variar de página para página. Caso eu queira dar ênfase a um produto em específico, posso criar tags personalizadas somente para aquela página.

Estrutura

Com o avanço da tecnologia, os buscadores utilizam filtros avançados para detectar a relevância do site. Um código organizado e limpo conta pontos para melhores resultados na busca orgânica. Com todas as imagens e itens devidamente nomeados e com as tags recomendadas, ocorre uma melhor "leitura" do site.

Taxa de Rejeição

Na prática, isso exerce uma grande influência. Os mecanismos de busca levam em conta diversos fatores para o posicionamento de seus resultados e, entre eles, a taxa de rejeição é um dos mais importantes. Caso o usuário tenha entrado no seu site, logo após saído e seguido para outro na mesma busca, indica que seu site não possui conteúdo relevante sobre a palavra-chave buscada e conta um ponto negativo para seu posicionamento. O site tem que possuir um conteúdo planejado e ligado com as palavras escolhidas para a campanha. Isso não cabe somente para o site, como também para páginas específicas. Um determinado produto pode 'sumir' dos buscadores por sofrer alto item de rejeição.

Uma interação com o Analytics ou programa semelhante é extremamente necessária para mensurar os resultados e ver que páginas do site podem ser melhoradas ou como ocorre a navegação do usuário, se o produto desejado está tendo o destaque que foi planejado desde o início, entre outros dados. Caso o site seja bem monitorado e todas as páginas estudadas, o resultado final pode surpreender.

Curiosidade: Até mesmos fatores 'simples' influenciam nos mecanismos de busca. Um deles, por exemplo, é o tempo de registro de seu domínio. Em alguns buscadores, domínios assinados por 10 anos têm prioridade sobre domínios assinados por apenas 1 ano. Domínios concorridos têm sua assinatura 'prolongada' e isso leva o buscador a deduzir que ele possui um conteúdo relevante e um público maior.

BlackSEO

Hoje, muitos sites utilizam formas de BlackSEO para se destacarem em mecanismos de buscas. Vale lembrar que estas formas de SEO são proibidas e normalmente os sites são banidos dos resultados orgânicos (não pagos) das buscas. Um famoso caso é o da BMW, que teve uma campanha totalmente banida dos buscadores por ter utilizado formas de BlackSEO em seu código, comprometendo o rendimento da campanha como um todo.

Essa é uma forma de usar a 'boa fé' dos navegadores para 'usurpar' posições, utilizando descrições e parâmetros que lembrem outra marca ou conteúdo não relevante ao site, para 'roubar' visitas, ou mesmo utilizando as práticas de SEO de modo inadequado, com intenção de burlar o sistema do buscador. Por exemplo, domínios semelhantes aos originais, hoje já é uma forma de lucro. Não que seja proibido, mas se eu usar este domínio com planejamento de SEO para aparecer junto com o original, já existem irregularidades. Por exemplo, o domínio twiter.com.br é semelhante ao twitter.com. Caso eu faça o usuário buscar por 'twitter' e aparecer o TWITER na busca, com maior destaque, o site corre o risco de ser banido.

Uma das maneiras mais conhecidas é repetir a mesma palavra dezenas de vezes, da mesma cor do fundo e com fonte minúscula. Antigamente era muito usado, hoje em dia é algo extremamente proibido pelos maiores buscadores.

Curiosidades: BlackSEO x Textos

É muito comum receber de clientes textos não revisados ou com ortografia péssima. Excessos de pleonasmos ou a mesma palavra repetida diversas vezes em um texto curto, pode ser considerado BlackSEO. É sempre interessante, antes de "jogar" um texto ou mesmo no CMS, revisar excesso de palavras repetidas ou se o mesmo "martelado", repetido.

Para finalizar, gostaria de agradecer à HostDime, uma das maiores no que faz no Brasil e que sempre apóia muito os meus projetos!

Até a próxima!

Considerações Iniciais

Hoje em dia os mecanismos de busca examinam o site como um todo para definir prioridades em seus resultados orgânicos (resultados não-pagos). Poucos sites possuem um planejamento estratégico para isso, porém cresce cada dia mais o número de portais com práticas básicas de SEO.

Especificamente para imagens, devemos ter alguns cuidados básicos, muitas vezes esquecidos, não só na hora do desenvolvimento, como também na criação. Isso que veremos a seguir.

Cuidados na estrutura básica

Embora muitas vezes seja inviável, o recomendado seria apenas imagens principais, como logotipo da empresa, títulos em forma de imagem e ícones específicos possuírem a tag IMG no layout. Demais imagens, como background, alinhamento, 'cantos' e outros detalhes, viriam das folhas de estilo (CSS).

Obviamente isso requer cuidados para deixar o código limpo. Muitas vezes é inviável fazer todas as imagens virem do CSS.

Em casos especiais, como páginas fixas que possuem fotos, ou em listagem/detalhes de um registro que possui imagem, são necessários cuidados na nomenclatura e parâmetros.

Sempre utilize um prefixo, conforme o tema da imagem, e sempre que for viável, trate o título inteiro.

Exemplo:

tipodoproduto_nomedoproduto.formato ==> dvd_somlivre.jpg, camiseta_listradamarfino.gif

É possível tratar os valores do banco para ajustar a nomenclatura.

Para páginas fixas, com textos longos e imagens decorativas, é necessário ter certeza de que o texto é relacionado à imagem. Se existir um texto que fale de internet, os buscadores ligarão a imagem com este assunto. Por isso que grande parte dos sites tem a descrição logo abaixo de sua imagem, dentro da mesma DIV. Isso facilita na busca.

Nomenclatura e parâmetros

É necessário um cuidado específico nesta parte. Para imagens decorativas, que não puderam serem chamadas do CSS, é aconselhado usar valores neutros, que não se assemelhe ao conteúdo.

Imagens representativas (logotipos, ícones, títulos) exigem um cuidado especial e é aconselhável, sempre que possível, obedecer algumas regras:

1 - Título da imagem nítido, direto e ligado ao tema.

logotipo_nomedaempresa ==> logotipo_fdd.gif

2 - Parâmetro Title, descrevendo o título sem underlines.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD">

3 - Parâmetro Alt, descrevendo o título sem underlines. É o texto que vai aparecer quando você deixar o mouse em cima da imagem. Alguns navegadores utilizam ele, e não o Title, para efetuarem a leitura.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD" alt="Logotipo da empresa FDD">

4 - Parâmetro Longdesc, como o próprio nome diz, é para descrições longas. Não é necessário o uso sempre, mas em imagens importantes, é interessante usar este parâmetro. Ele 'resgata' a descrição de um arquivo de texto.

<img src="_imagens/logotipo_fdd.gif" title="Logotipo da empresa FDD" alt="Logotipo da empresa FDD" longdesc="desc/logo.html">

Vale lembrar que estes cuidados são para imagens representativas (logotipos, ícones, títulos e etc).

Espero que tenham gostado do artigo, em breve tem mais!

Há pouco tempo o GeoCities, serviço gigantesco de hospedagem gratuita do Yahoo!, anunciou que fechará suas portas em outubro deste ano, e, se não vai tirar da rede milhares milhões de pequenos sites, deixará um grande buraco vazio na internet.

Hoje em dia as crianças já crescem com acesso a computadores e a grande rede, ainda mais com a inclusão digital que vem ocorrendo, e por muitas vezes para um jovem, ainda sem renda, adquirir uma hospedagem paga é complicado e um tanto desestimulante para início de carreira, o que pode acarretar em um abandono prematuro de futuros grandes profissionais. Afinal, sobram vagas e falta mão de obra especializada.

É um tanto triste que com o avanço tecnológico, os serviços gratuitos de hospedagem sejam cada vez mais escassos. Por muitas vezes leitores e alunos me perguntam sobre estes serviços e vasculham a internet tentando encontrar um serviço gratuito de hospedagem sem propagandas e fácil de manusear. Quando encontram são em sites estrangeiros e o inglês se torna um obstáculo para alguns deles.

A internet é e sempre foi um veículo de destaque por possuir liberdade de expressão, é por este motivo que ela é a mídia que mais cresce no mundo. Chega a ser uma mazela no mercado a inexistência de um servidor gratuito decente e que não explore o usuário com anúncios saltitantes ou espaço de 500kb para guardar arquivos.

Para auxiliar aos leitores, fiz uma pesquisa na grande rede e testei diversos sites que oferecem hospedagem gratuita, consegui observar os pontos positivos e negativos de cada um e fiz uma lista com os três melhores que me deparei. São eles, do melhor para o pior (na minha opinião como usuário):

Primeiro

HDFree - Sem dúvida, o melhor serviço que utilizei neste sentido. Possui acesso via FTP, sem propagandas, rápido e fácil de manusear, suporta sites em DHTML e possui espaço e tráfego ilimitado. Para quem está iniciando neste mercado é, na minha opinião, sem dúvida a melhor opção. Pelo que pude pesquisar, a HDFree já é sucesso na Índia, México e em vários países da América Latina e já tem um público bem fiel no Brasil. Conseguiu cumprir o que propôs. Nota 9.

Segundo

HPG - O bom e velho HPG, já está no mercado há anos. É o serviço de hospedagem gratuita oferecido pelo IG. É fácil de utilizar, possui alguns códigos prontos para você inserir, porém o grande ponto negativo é o espaço ilimitado. Ainda assim, é uma excelente opção. Nota 6.

Terceiro

CriandoSite - É um serviço bem antigo, fui descobrir que ele ainda estava no ar ao pesquisar para escrever este artigo. Possui uma interface agradável e também é simples de manusear, aceita apenas linguagens básicas e várias opções de endereço. O principal ponto negativo que encontrei foi a lentidão para abrir alguns sites. Além disso, às vezes me pareceu instável. Nota 5.

Ao som de: Tangos e Tragédias - Aquarela da Sbornia

Peço desculpas pela longa ausência. Agora, em uma feliz parceria com o iMasters, trago este pacote de colunas! Gostaria de informar a todos meus leitores que o MSN que a maioria possui está desativado. Para quem quiser conversar comigo ou com outros leitores, basta adicionar no MSN : mgroup47555@hotmail.com

Também gostaria de divulgar o meu curso lançado pela TIShop. Quem tiver interesse, basta acessar clicando aqui. Onde você encontrará o conteúdo desta matéria e muito mais!

Neste artigo aprenderemos como as cores se formam e entenderemos como criar um site harmonioso visualmente.

As cores são formadas por ondas, que refletem em um determinado material. Cada cor possui uma determinada freqüência, como mostrada na tabela abaixo. Analisaremo-la com calma e observaremos alguns exemplos práticos depois.

Vamos imaginar um determinado objeto, que absorva freqüências maiores que 600 THz, logo ele refletirá freqüências de até de 600 THz, portanto ele terá uma coloração VERDE. Uma observação importante: o branco nada mais é que do que todas as cores refletidas ao mesmo tempo, e o preto é a ausência de cores (o objeto absorve todas).

Vamos para um exemplo bem prático. Imaginaremos uma sala, com uma esfera AZUL e outra esfera BRANCA, como na imagem abaixo:

Agora pegue esta mesma sala e coloque uma luz verde pura (que transmita ondas entre 500 - 565 mn), e olhem como ficará:

A esfera branca, como reflete todas as cores, possui apenas a cor verde para refletir, então ela fica VERDE. A esfera azul reflete apenas ondas entre 440-485mn, as outras ela absorve. Como não possuía ondas entre estes valores, ela absorveu todas as ondas existentes. Já que o preto é absorção de todas as cores, ela fica PRETA.

Faça um exemplo prático. Abra o seu Photoshop, crie uma esfera azul e outra esfera branca, logo após crie um quadrado do tamanho de toda tela de trabalho e o deixe com a coloração verde e logo após o coloque em 'superexposição linear'. Você verá que uma esfera ficará preta e a outra da cor verde.

Cores quentes e cores frias

Muitas pessoas preferem se guiar por cores quentes e cores frias, ao invés de frequência e comprimento de onda. Não preciso explicar muito sobre cores quentes/frias, observem a imagem abaixo:

Observem a ordem das setas, passa do vermelho para o laranja-amarelo-verde-ciano-azul-violeta, seguindo a mesma ordem das freqüências das cores.

RGB e CMYK

Aqui veremos sobre algumas teorias usadas para formar as cores, estes dois sistemas RGB e CMYK são utilizados em vários softwares hoje em dia.

O RGB (utilizado em televisão, monitores e etc.) consiste na adição de comprimentos de ondas. Significa Red+Green+Blue (vermelho+verde+azul), a soma da onda de todas estas cores resulta na cor BRANCA. Cada cor varia de 0 a 255. Por exemplo, se você colocar o valor de R = 255 , G = 255 e B = 255, você obterá a cor BRANCA, caso coloque R = 0, G = 0 e B = 0 obterá a cor preta.

O CMYK é utilizado em praticamente todas as impressoras. Suas siglas significam C = Cyan (ciano), M = Magenta (magenta), Y = Yellow (amarelo), K = Black (preto, utilizam o K e não o B para não confundir com Blue, que significa azul). Consiste na sobreposição destas cores, para formar uma outra cor. Cada valor varia de 0 a 100%. Se deixarmos o C = 0%, M = 0%, Y = 0% e K = 100%, obteremos uma cor 100% preta. Se deixarmos todos os valores em 0%, obteremos uma cor branca.

Uma observação importante é que não existe uma conversão perfeita de RGB para CMYK. Por exemplo, as impressoras utilizam CMYK e os monitores RGB, a maioria das gráficas pede quando você quer algo 100% preto, utilizar o sistema CMYK, e deixar C, M e Y em 0% e K em 100% na hora de imprimir. Mas, se você colocar estes valores no Photoshop, o código da cor não fica #000000 e sim #231F20, no caso não fica um preto puro no Photoshop, mas na impressora ficará. Curioso, não?

Na prática

Agora veremos como utilizar isto na criação de um layout. Quanto menor a frequência e maior a onda, mais cansativo se torna para nossa vista. Mas isso não quer dizer que você precisa fazer um site apenas com cores de frequência mais alta e ondas menores, pois o site ficaria com um visual sem graça. O ideal é fazer uma mescla entre cores quentes/frias ou entre cores de alta e baixa freqüência (como preferir). Observe estas três imagens:

Apenas cores quentes / menor frequência

Apenas cores frias / maior frequência

Balanceamento entre cores de maior e menor frequência

Repare bem na diferença entre cada imagem, em uma delas se torna mais cansativa a nossa visão, porém chama mais atenção. A outra fica meio sem graça, sem conteúdo, e na terceira mais balanceada, da uma aparência mais agradável, mais harmoniosa.

Um outro modo de escolhermos as cores para nosso site é escolher duas cores-padrão que serão usadas. Primeiro vem a pergunta, você quer um site claro ou escuro? Se sua pergunta for um site claro, use como base a cor branca, se for escuro utilize a cor preta. Então temos a cor base do nosso site, agora escolha uma cor principal. Por exemplo, caso você tenha interesse em trabalhar com branco/azul, utilize detalhes com cores de baixa frequência para destacar e dar mais vida. Caso sua escolha seja branco/vermelho use cores de alta frequência para amenizar um pouco o layout.

Uma outra escolha é o verde, não precisa ter cores frias nem quentes o acompanhando, ele por si passa um visual agradável. Se deseja um site totalmente neutro, utilize as cores preto/branco apenas.

Significados

Na hora de escolhermos as cores para fazermos o 'balanceamento', é bom termos uma noção de que idéia estas mesmas irão transmitir. Por exemplo, não seria legal fazer o site de uma loja chamada BlackStore utilizando como base cor-de-rosa. Os significados que irei passar agora não devem ser seguidos rigorosamente, é só para transmitir uma idéia inicial, para ver se compreendem melhor o que digo.

Vermelho

É uma cor mais excitante, transmite mais energia, inquietação. Em locais com esta cor como base, o tempo parece passar mais rápido. Ela é a cor que mais se destaca, por isso é usada para chamar atenção.

Laranja

É uma cor que transmite uma idéia mais jovem, mais animada, é uma cor mais radiante.

Amarelo

Também transmite uma idéia mais jovem, mais clara e transparente, ela estimula a criatividade, o intelecto.

Verde

O verde é a transição entre cores frias/quentes ou de menor/maior ondas. Ela traz uma sensação de equilíbrio, transmite uma idéia mais relaxante.

Azul

Transmite um aspecto calmo, tranquilo. Ambientes com esta coloração parece que o tempo passa mais lentamente.

Preto

As cores preto/branco são usadas como base para um site, onde escolhemos se o site vai ter uma tonalidade mais clara/escura. O preto é mais misterioso, aguça o intelecto e a reflexão. É usado como base para sites com tonalidade escura.

Branco

O branco é usado como base para sites com tonalidade clara. Ele transmite uma idéia transparente, clara e objetiva. Passando uma sensação de calma e conforto.

Agora basta escolher as cores certas para o site de seu cliente, conforme as informações que você coletou dele.

Aproveitando a oportunidade, gostaria de divulgar duas empresas que me patrocinam e são uma referência de qualidade!

HostDime - Uma das maiores empresas do Brasil no seu setor de atuação, confiram!

Soft4You - Um ótimo sistema de gestão de hosting, 100% nacional, imperdível!

Ao som de: Mägo de Oz - Fiesta Pagana

Após uma longa, muito longa ausência, venho de mãos cheias para uma safra de novas colunas. Antes de mais nada, gostaria de informar que o MSN que boa parte de meus leitores possuem está fora de funcionamento. A minha empresa RC Designer sofreu algumas "divisões", e quem quiser conversar comigo, com outros leitores ou para jogarmos uma conversa fora, basta adicionar no MSN: mgroup47555@hotmail.com

Também gostaria de divulgar o meu curso lançado pela TIShop, quem tiver interesse, basta acessar clicando aqui.

Sem mais demandas, vamos para o nosso artigo!

Vi muita gente com dificuldades na elaboração de um menu utilizando includes, o que em alguns casos é uma ótima 'fuga' de iframes, por exemplo.

Antes de mais nada, precisamos saber como carregar um include em determinado lugar a partir de um link. No HTML colocamos o nome da página e o caminho em target (caso queira abrir em um local específico, iframes, âncoras e etc), correto? Para includes isto fica mais fácil.

Vamos examinar um código simples e entendê-lo por completo:

<?

$link = @$_GET["link"];

switch ($link)
{
default:
include "nomedapagina.php";
break;

case "maisumlink":
include "pagina2.php";
break;

case"outrolink":
include "pagina3.php";
break;

}

?>

Este código simples é inserido no local onde queremos que o include seja carregado, sem muito mistério.

Inicialmente, criamos uma variável chamada LINK, logo após criamos um switch a partir da variável criada. Para os mais desinformados, o switch trata-se de uma função que valida uma variável.

A partir de agora vamos definir as páginas do nosso menu. Incialmente definimos a página inicial (default). Ela será carregada quando nenhum 'caso' estiver sendo exeutado. Logo após, colocamos o código do nosso include ( include "nomedapagina.php"; ). Feito isto, colocamos uma pausa, para sinalizar que esta função se encerra neste momento, caso contrário ele continua lendo o resto do código como se ainda fosse 'default' e ocasionaria em algum erro, esta pausa é dada pelo 'break;'. Observe:

default:
include "nomedapagina.php";
break;

Feito isso, vamos para os demais links. O processo é bem semelhante ao anterior, porém como não estamos trabalhando com um link específico e não 'default', precisamos informar o nome deste link, informando a partir do comando 'case'. Sendo ( case "nomedolink": )

Por exemplo, se não estiver nenhum link 'chamando', ele abrirá o default, mas CASO o link esteja chamando o include X, ele abrirá a página respectiva a este include. O restante é igual ao anterior. Observe:

case"outrolink":
include "pagina3.php";
break;

Após isso, repita este código para cada página que deseja ser carregada neste include. Mude apenas o caso e a página desejada. Como pode observar no código citado anteriormente.

Neste caso, cada link ficaria do seguinte modo:

?váriavel=caso

No nosso exemplo, ficaria:

?link=outrolink

Não precisamos informar nada no comando 'target' pois ele irá onde esta a variável LINK.

Espero que tenham compreendido como fazer um menu a partir de includes, em PHP.

Mas agora vou passar alguns macetes simples. Normalmente, quem esta iniciando no desenvolvimento de sites dinâmicos e com a programação de modo geral vai se deparar com este pequeno problema:

"Tenho um menu com includes, que bom! Mas dentro deste include eu coloco outros links que precisam ser abertos dentro dele!"

Isto é bem comum de ocorrer, por exemplo, dentro deste include você exibe o resumo de uma notícia, no qual clicando exibe-a por completa. Ao clicar para exibir a notícia completa, ele abre a página com a notícia utilizando a tela toda e não apenas dentro do include.

Observe como ficaria o nosso link, neste caso:

?link=NOMEDONOSSOCASO&id=<?php echo $row_registroexibido['id']; ?>

Neste exemplo, colocamos o link normal (?link=caso), e colocamos o comando "&" para simbolizar outro parâmetro para o link - neste caso a exibição de um registro a partir do campo ID. Basta utilizar o comando &, simples e prático. Caso tenham achado confuso, ao se depararem com este 'probleminha', compreenderão melhor!

Para os que estão começando:

1 - O include terá a medida da página que ele esta carregando, ao contrário de iFrames que você específica uma medida. Por causa deste motivo, não aparecerá barra de rolagem ou semelhante, o que é uma vantagem na exibição de conteúdo como também na parte de paginação.

2 - As chaves, aspas, ponto-e-vírgula e etc fazem parte da sintaxe do PHP, como da maioria das linguagens de programação, só cabe a nós respeitarmos. Quem sabe em um futuro artigo explico mais detalhadamente estes detalhes, para quem esta iniciando.

Fiquem de olho, toda a semana agora terei uma matéria nova! Espero que tenham gostado desta, comentem!

Gostaria de aproveitar a oportunidade para indicar 2 apoiadores do meu trabalho:

HostDime - Uma das maiores empresas do Brasil no seu setor de atuação, confiram!

Soft4You - Um ótimo sistema de gestão de hosting, 100% nacional, imperdivel!

Ao som de: Mägo de Oz - Satania

Olá pessoal, tudo tranquilo?

Antes de mais nada, um feliz ano novo a todos os leitores. Neste clima de festas, veremos como criar caixas e presentes personalizados, de um modo simples e bem flexível.

Com uma noção básica de desenho é fácil criar uma caixa, mas já que nem todos possuem esta noção, eu partirei do zero, montando toda a estrutura do desenho no Photoshop antes de começar. (como muitos pediram, vou colocar os comandos em inglês - português, e minhas próximas colunas já serão em Photoshop CS2).

Crie um documento com as seguintes características:

Passo 1- Pressione Ctrl+Shift+N para criarmos uma nova camada.

Passo 2- Com a ferramenta "Marca de seleção Retangular (Retangular Marque Toll)" faça um quadrado.

Logo depois, clique com o botão direito do mouse, e selecione "traçar (stroke)", como na imagem abaixo:

Deixe do seguinte modo:

Cor: 6C0000

Passo 3 - É semelhante ao anterior. Criaremos um quadrado com a ferramenta "Marca de seleção Retangular (Retangular Marque Toll)", só que em um local diferente, e logo depois clicamos com o botão direito do mouse, selecione 'traçar(stroke)', como na imagem abaixo:

Na parte do traçar, deixe os mesmos valores, apenas mude a cor para: B80000

Nossa imagem deve estar da seguinte forma até o momento:

Passo 4 - Com a 'ferramenta linha (line tool)', traçaremos quatro linhas, como na imagem abaixo:

As duas linhas superiores, da seguinte cor: 820000

A inferior da direita (interna): B80000

A inferior da esquerda (externa): 6C0000

Isto é feito para ficar mais fácil de colorir nos próximos passos. Neste momento temos um cubo, que é a base para a caixa.

Agora agrupe todas as camadas, vinculando-as e apertando Ctrl + E:

Passo 5 - Com a 'Ferramenta Lata de Tinta (Paint Bucket Tool)' , pinte os quadrados da seguinte forma:

Cores: 1 - 820000 2 - 6C0000 3 - B80000

Com o pincel, lata de tinta (paint bucket tool), ou qualquer ferramenta de sua preferência, apague as linhas, e deixe do seguinte modo:

Passo 6- Com a 'ferramenta linha (line tool)' novamente, faremos a tampa da nossa caixa. Trace algumas linhas (cor: 930000) do seguinte modo:

A imagem não ficou muita boa, mas prestem atenção em cada cubo para verem o local onde a linha foi criada. Cuide para que as linhas fiquem juntas, se não a tinta pode 'vazar'.

Vincule todas as linhas criadas, e pressione CTRL + E para agruparmos em uma só camada (como anteriormente).

Passo 7- Já com as camadas agrupadas, selecione a 'Ferramenta Lata de Tinta (Paint Bucket Tool)' e pinte do seguinte modo a nossa tampa:

Cor (parte superior): 820000

Cor (parte lateral): 910000

Cor (parte da frente): CF0000

Pode parecer meio confuso até o momento, mas se seguirem os passos com calma, deve estar tudo certo. Já temos uma caixa, mas agora falta as fitas que toda caixa de presente possui, e o 'top' na parte superior.

Ainda na camada da tampa, vá em 'Opções de Mesclagem - Sombra Projetada (Blending Options - Drop Shadow)' e deixe os valores do seguinte modo:

Isto resultará uma pequena sombra, na tampa, ficando um melhor acabamento

Passo 8 - Crie um quadrado da seguinte cor FFD200, entre a tampa e a caixa:

Agora peço muita calma e concentração. Muita gente se perdeu em uma parte parecida com esta no artigo anterior. Vamos por partes:

1 - Duplique a camada deste quadrado amarelo

2 - Posicione ela após a camada da tampa

3 - Ainda na camada duplicada, segure CTRL e clique na camada da TAMPA. Isto criará uma seleção ao redor da tampa. Veja na imagem:

No meu caso, a 'Camada 1 - Caixa", "Forma - 10 - Fita', 'Forma 9 - Tampa', 'Forma 10 - Camada atual'.

4 - Logo após isto, pressione CTRL + SHIFT + I, para invertermos a seleção, e logo após aperte delete. Observem como deve ficar:

Agora, faça outro quadrado logo acima, e clique com o botão direito do mouse. Logo após, selecione a ferramenta distorcer:

Com o "distorcer" selecionado, alinhe a fita de acordo com a tampa da caixa. Observe:

Agora repita os mesmos passos, para criarmos uma fita na lateral. Crie um quadrado na lateral, alinhe ele com a ferramenta distorcer, duplique, posicione a camada acima da tampa, faça os passos para deletar, crie outro na parte superior, e novamente alinhe com a ferramenta distorcer. Deve ficar parecido com isto:

Cuidem para não se perder. É algo bem simples, mas precisa ter um pouco de atenção.

Passo 9 - Crie um círculo onde as linhas se cruzam, e em 'Opções de Mesclagem (Blending Options)' deixe os seguintes valores:

- Sobreposição de degrad (Gradient Overlay)'

Cores, da esquerda para direita: D57D00 / FFC600 / FFEAA3 / FFAE00

- Brilho Interno (Inner Grow)

Sua imagem, até o momento, deve estar do seguinte modo:

Agora, crie um círculo ao lado, vá em 'Filtro - distorção - ondas (filter - distort - wave)' e deixe os valores do seguinte modo:

Obs.: O resultado pode variar de acordo com o tamanho do círculo que você fez. Não fique preocupado se ficar diferente.

Agora aplique a mesma textura aplicada no círculo, com o degradê e o brilho interno. E posicione logo ao lado, e logo após dupliquem a camada. Mudem um pouco o ângulo da camada duplicada. O resultado deve ficar mais ou menos assim:

Passo 10- Crie um retângulo, mais alto, e novamente vá em 'Filtro - distorção - ondas (filter - distort - wave)' , e deixe os mesmos valores. Logo após, faça outro e repita o mesmo passo anterior. Posicione-os em uma posição de sua preferência. Olhe:

Caso não fique do modo que você quer, pode alterar o valor das ondas sem problemas!

Coloquei uma pequena sombra também nestes dois últimos retângulos com "onda". O que acharam do resultado final?

Observações e dicas: Sei que o artigo ficou longo, mas a minha intenção era detalhar com calma o processo. Existe um modo mais fácil de fazer isto? SIM! Mas este modo pode ser usado para diversas outras funções, até mesmo para criação de ícones.Usem texturas na caixa, brushes, desenhos...É possível criarmos vários efeitos ou desenhos a partir deste conceito. Usei apenas ferramentas simples como podem ter percebido. Minha intenção não é um resultado final fantástico, e sim uma nova técnica para vocês usarem em seus trabalhos.

Pessoal, queria agradecer pelo carinho, tanto no MSN quando nas colunas, muito obrigado! Fico a disposição para tirar qualquer dúvida! Basta entrarem no meu site www.rcdesigner.com.br e pegarem meu MSN na parte de contato.

Queria divulgar um projeto meu, chamado RedePhotoshop (www.redephotoshop.net). Confiram! Desde já fico grato!

Agora quero a opinião de vocês, e o que preferem para o próximo artigo? Estou com duas idéias, um artigo sobre vetorização, ou três artigos seqenciais sobre CSS para criação de layouts (com comandos, curiosidades: um manual completo).

Ao som de: La Lugh - Dónal Dubh

Opa pessoal, tudo tranqüilo?

Prometi trazer novas colunas com freqüência, mas acabei dando uma parada. Todos que tiverem dúvidas sobre meus artigos, fiquem a vontade para entrarem em contato ou me adicionarem no MSN. Vocês encontram os dados no meu site www.rcdesigner.com.br.

Neste meu quarto artigo, aprenderemos a como criar um ambiente, de forma bem simples e com um resultado de impacto.

Para inicar, criaremos um arquivo com as medidas 800X600, seguindo a imagem abaixo:

Depois de criarmos o arquivo, pressione Ctrl+Shift+N para adicionarmos uma nova camada, e a nomeie "Parede Cimento". Deverá ficar assim:

Logo depois, deixe suas cores do seguinte modo:

1:000000 2:5B5B5B

Agora vamos em Filtro - Acabamentos - Nuvens, e logo depois vamos em Filtro - Ruído - Adicionar Ruído. Deixe os valores do seguinte modo:

Agora vamos em Filtro - Acabamento - Efeitos de Iluminação, e deixe os valores da seguinte forma:

Pressionando OK, o nosso trabalho até o momento deve estar parecido com isto:

Agora vamos criar uma nova camada pressionando Ctrl+Shift+N, e colocaremos o nome de "Chão". Veja como deve ficar:

Agora vamos criar um retângulo na parte de baixo:

Clique com o botão direito do mouse na camada "Chão" e clique em "Converter Camada em Bitmap". Logo depois, clique na camada "Chão" com o botão esquerdo segurando a tecla Ctrl, para selecionarmos a camada.

Agora vamos modificar nossas cores, deixando do seguinte modo:

1:482A00 2:634600

Agora novamente vamos em Filtro - Acabamento - Nuvens, e depois novamente Filtro - Ruído - Adicionar Ruído. Deixe os mesmos valores da outra vez. Agora vamos em Filtro - Desfoque - Desfoque de Movimento, e deixe os valores do seguinte modo:

Agora novamente vamos em Filtro - Acabamento - Efeitos de Iluminação, e deixe os valores como anteriormente. Pressione OK e o resultado até o momento deverá estar parecido com isto:

Ainda na camada chão, vamos em Opções de Mesclagem.

Colocando um Brilho Externo:

E agora um Brilho Interno:

Já temos algo mais ou menos convincente nesta altura, certo? Agora pressione Ctrl+Shift+N para criarmos uma nova camada, e a nomeie "Parede Tijolo". Deixe-a atrás da camada "Parede Cimento":

Agora deixe suas cores do seguinte modo:

1:B36500 2:AB4000

E vamos repetir os mesmos passos das outras camadas. Filtro - Acabamento - Nuvens, logo depois Filtro - Ruído - Adicionar Ruído (deixe os mesmos valores de anteriormente), depois Filtro - Acabamento - Efeitos de Iluminação (também deixe os mesmos valores de anteriormente). Agora vamos em Filtro - Textura - Texturizador e deixe do seguinte modo:

Pressionando OK, fica pronta a nossa parede de fundo, mas como podem perceber ela não esta aparecendo. Agora selecione a ferramenta Borracha

E apague algumas partes da camada "Parede Cimento", olhem como deve ficar:

Pronto! Temos um ambiente bem legal e simples de ser feito. Basta usar a criatividade para fazer portas, janelas, enfeites e etc... Podemos fazer uma janela ou porta usando as mesmas técnicas.

Espero que tenham gostado! Gostaria de divulgar o site da minha empresa www.rcdesigner.com.br e um outro site feito por mim, de um grande amigo, um dos melhores vocalistas do Brasil (www.carlcasagrande.com), para quem gosta de boa música é um prato cheio!

Abraços a todos, até a próxima!

http://www.orkut.com/Community.aspx?cmm=24444027

Bom, vamos ao que interessa. No primeiro artigo criamos um cabeçalho para uma página web. Antes de continuarmos, eu tomei a liberdade de fazer algumas modificações bem simples.

Continuando nosso trabalho, vamos abrir o cabeçalho que criamos. Se você ainda tem o .psd, abrindo a imagem no Photoshop, selecione ela com a ferramenta "Marca de Seleção Retangular". Vá em editar > copiar mesclado. Agora vamos em arquivo > novo, para com as dimensões 750 X 700px. Nesse arquivo vamos montar o resto da nossa página. Cole o cabeçalho que você acabou de copiar, e mova para o topo do novo arquivo.

Para criarmos o menu, crie um quadrado e coloque no canto, junto ao cabeçalho. Para termos medidas mais exatas, pressione ctrl+r para aparecer a régua:

Cor: #686868

Como podem ver, deixei 20px de altura e 140px de largura. Altere sua cor do primeiro plano para uma um pouco mais clara. No caso, utilizei #9c9c9c, e vamos fazer alguns traços de modo bem "aleatório", utilizando as funções "distorcer" e "perspectiva".

Mudei um pouco o formato dele. Deve ficar mais ou menos assim:

Usando o violão do artigo anterior, e o mesmo efeito, usei como enfeite nessa imagem:

Fonte: BankGothic Md BT

Já temos a parte superiro do nosso menu e precisamos apenas incluir os links. Antes, olhe como deve estar seu projeto até o momento:

Crie um quadrado novamente, só que com 15px de altura, e posicione logo abaixo do "topo do menu". Usei a seguinte cor: #E8E1BA

Repare as medidas na régua

Vamos adicionar um chanfro neste quadrado. Clique em "adicionar um estilo de camada" e logo depois em "chanfro e entalhe".

Deixe os seguintes valores:

Resultado:

Para dar um acabamento, crie novamente um retângulo, desta vez menor e com a cor #FF722C. Posicione na lateral do menu:

Coloquei um chanfro com os mesmos valores do anteior. Agora basta "prolongar" o menu, multiplicando os itens.

Bom, terminamos por aqui, com algo simples, rápido, e que poderá ajudar na sua imaginação. O importante é que você aprenda a utilizar os efeitos e conseguir visualizar um bom resultado final, com as possibilidades que o Photoshop oferece.

Abraços! Qualquer dúvida, é só entrar em contato.

Opa pessoal, tudo bom?

Peço mil desculpas pelo meu sumiço por aqui, e a todos meus leitores que pediram novas colunas e aos pedidos por e-mail que fiquei de atender e acabei não atendendo. Tive um tempo conturbado por aqui, estou lançando minha empresa, seguindo meus projetos e outros afazeres.

Bom, voltando ao assunto, vamos iniciar uma série de artigos sobre a utilização do Photoshop para web, criação de interfaces, etapas da produção de um site, dentre outros. Nesa matéria vamos ver algumas técnicas para criação da parte superior de um site (cabeçalho), que talvez seja uma das mais importantes do projeto.

Como tema, escolhi um site sobre música. Abrindo o Photoshop, vamos lá! Crie um novo arquivo:

Deixem as cores da seguinte forma:

E8E1BA / EFF1E8

Com a ferramenta "Lata de Tinta", deixem a camada "Plano de Fundo" com a seguinte cor - EFF1E8.

Criem um retângulo, e adicionem um traçado, em "Estilo de Camada":

Cor - D8CE98

Sua imagem deverá estar mais ou menos assim:

Agora iremos criar alguns enfeites para o cabeçalho, mas ficar trabalhando neste arquivo será meio "apertado". Portanto, vamos criar um novo. Criei um com as medidas 450x300 pixels, mas não esqueça, deixe o outro aberto!

Neste novo arquivo, crie um retângulo arredondado, deixe-o na cor branca (FFFFFF), e com um traçado da mesma cor e valores do anterior. Logo após, crie um retângulo no centro, com a cor EFF1E8. Olhe como deve ficar:

Bom, agora vamos colocar algo escrito no meio. Uma tablatura. Usei estre pedacinho da música Z.I.T.O. da banda Angra:

e ----------------------------------------------------------------
B --19B--17-15----15B---------------------------------------------
G ------------16------16-14----16--16-14--------------------------
D ---------------------------16-----------16-15-14-12-14-15-14-12-
A ----------------------------------------------------------------
E ----------------------------------------------------------------

Fonte: Courier

Escrevendo no Photoshop, deixe tamanho 15, e coloque nesta posição:

Clique com o botão direito na camada das "letras" que estamos trabalhando agora. e converta para Bitmap. Clique na camada do retângulo menor, pressionando Ctrl, para selecioná-lo e, logo após, pressione Ctrl + Shift + Del, olhem como deve ficar:

Deixe a camada que tem a tablatura com opacidade em 50%. Agora, repita os mesmos passos, para criarmos um novo retângulo, ou faça uma cópia dos atuais. Só vamos colocar outra coisa no meio. Exemplo:

C |---------------c------c--c-c-|c--c--c--c-X-----|
R |X-X-X-X-X-X-X-X--X-X-X-------|------------X--X-|
S |--O---O---O---O--O---O--O----|O--O--O--O--O--O-|
B |OOOOOOOOOOOOOOOOOOOOOOOOOOOOO|OOOOOOOOOOOOOOOOO|

Fonte: Courier

Vejam como deve ficar:

Selecione as partes do primeiro quadrado, com aquela "correntinha" e pressionem "Ctrl + E" para juntá-las, idem com o segundo. Vamos colocá-los de uma forma aleatória, veja:

Em seguida, agrupem os dois, com aquela "correntinha", selecione eles, e copiem (Editar > Copiar). Vamos voltar para o outro arquivo que deixamos aberto. Voltando, segurando Ctrl, clique na camada daquele retângulo grande que fizemos, para selecioná-lo:

Feito isso, vamos colar aqueles quadrados com as tablaturas, mas nada de Ctrl + V! Vamos em Editar > Colar Em. Assim, o que colamos vai ficar apenas dentro da parte selecionada. Depois de clicar em "colar em", também dupliquei a camada e ajustei os tamanhos. D êem uma olhada em como ficou:

Como vocês podem ver até agora, não usei nenhum "grande efeito", apenas algumas coisas simples. Usando um pouco de criatividade, pode se fazer muito!

Vamos colocar um nome no nosso site. Que tal MusicMaster? Que nome ruim, não? Eu que ainda falo de criatividade hehe. Mas vamos usar ele mesmo.

Usei uma fonte que todos devem ter, TIMES - Tamanho 35 com negrito (Bold), e na parte de baixo usei Courier - Tamanho 15. Para quem não consegue ler, escrevi na parte de baixo "seu portal de música":

Peguei a imagem de um violão no Google para colocarmos como enfeite:

Colem ele no arquivo, usando aquele mesmo processo, pressioando Ctrl para selecionar o retângulo que criamos no cabeçalho, e com a ferramenta "varinha mágica" tirem o fundo branco dele.

Agora pressionem Ctrl + U, e deixem luminosidade em -100.

No artigo anterior, "traços diferenciados", lidei com algumas linhas, certo? Para não precisar postar mais imagens explicando como que se faz, dêem uma olhada nessa matéria. Usarei como enfeite de fundo aqui, na cor branca, com opacidade em 50%, olhem:

Não dá para ver muito bem, pois a imagem está reduzida, mas no final do artigo vou disponibilizá-la maior.

Bom, vamos dar um retoque final: Crie um círculo preto, na parte de baixo do nome do site:

Vá em Filtro > Desfoque > Desfoque Gaussiano, em "Raio" deixem 11,0. Logo após, deixem a opacidade da camada com o círculo em 50%, olhem:

Com algumas notas musicais, elaborei mais alguns enfeites:

Clique aqui para ver a imagem ampliada.

Bom pessoal, acaba por aqui. Em relação ao "corpo" do site, deixo que vocês decidam para o próximo artigo. Vocês querem um corpo com bastante efeitos, difíceis de se fazer, ou querem que eu continue com algo simples e leve? Na minha opinião, o segredo está na simplicidade.

Vou aproveitar o espaço para divulgar o site de um amigo, bem útil para muitos aqui www.odns.com.br.

Abraços a todos, e até a próxima!

Olá pessoal. Este é meu primeiro material publicado pelo iMasters, espero agradar o maior número possível de pessoas e buscaremos criar um efeito final extremamente interessante, através de práticas simples pelo Photoshop.

Para iniciarmos, crie uma imagem com as seguintes proporções:

Deixe o plano de fundo com a cor: #70A4BA.

Clique na opção degradé e, logo após, dê dois cliques no degradé acima para criarmos um novo degradé.

Deixe do seguinte modo:

Usei a cor branca em nosso exemplo. Na parte de opacidade, deixe 0 – 30 – 0.

Insira o degradé bem em cima. Deverá ficar da seguinte forma:

Tudo certo até agora? Vamos criar algumas linhas utilizando a ferramenta “Ferramentas Linhas (U)“. Criei 5 linhas, como podemos observar na imagem abaixo:

Coloque-as um pouco acima do degradé, como na imagem de exemplo.

Obs.: Não se esqueça de agrupar as camadas das 5 linhas.

Clique na camada onde estão as 5 linhas, vá em Filtro > Distorção > Ondas, e deixe os seguintes valores:

Repare que sobrará um pouco dos lados. As linhas não fecharão a página inteira. Aumente o tamanho delas para as laterais, até ficar como ilustrado abaixo:

Selecione a camada das linhas, e deixe com opacidade 40. Logo após duplique-a e vá em Editar > Transformação > Girar Verticalmente, colocando a camada duplicada um pouco mais abaixo, até ficar como abaixo:

Espero que até agora esteja tudo certo com vocês.

Usando a ferramenta “Retângulo Arredondado”, crie uma figura do tamanho que preferir. Ajustaremos melhor depois. Vá em “adicionar um estilo de camada” e deixe do seguinte modo:

Deixei a sombra com a cor: #979595.

Cor: #B3B3B3

Posicione o “Retângulo arredondado” em algum lugar que vocês acharem mais apropriado para o menu. Eu deixei assim:

Ali utilizei a fonte “papyrus”.

Utilizando a “Ferramenta retângulo”, crie um retângulo logo abaixo, vá em “Adicionar um estilo de camada” e deixe do seguinte modo:

Deixe a camada que contém este retângulo com opacidade 40. O nosso trabalho até agora deve estar mais ou menos assim:

Pegue a primeira camada com linhas que você criou e duplique. Coloque em nosso retângulo, lá em baixo. Deverá ficar assim:

Agora usem um pouco da criatividade de vocês para concluirem o layout. Coloquei alguns detalhes como na imagem:

Dica: Altere os valores das “Ondas” para uma melhor formação na parte superior, de acordo com o site.

Bom, finalizo por aqui e espero que tenham gostado! Como vocês podem ver, é um layout agradável e simples de se fazer.

Até a próxima. Abraços!