Como elaborar um projeto de WebSite?

Você pode relacionar os ítens abaixo com a minha postagem sobre projetos. O resultado será um site muito bem organizado.

Preparação

•Estudar as particularidades do serviço e do cliente;

•Observar projetos semelhantes (Beanchmark);

•Definir metas e estratégias;

•Elaborar um formulário para captar a idéia do cliente sobre o projeto.

Documentação

•Confirmações dos objetivos do site (corporativos, marketing, etc.);

•Escolher um modelo de negócios e plano de Marketing;

•Planejar as interações, tecnologias e funcionalidades;

•Escolher um sistema para gerenciar o conteúdo;

•Escolher banco de dados e modelo de backup;

•Regras e responsabilidades;

•Duração das etapa inicial do projeto;

•Validar o início do projeto com um sinal ($) do cliente;

Planejamento

•Título do website;

•Procurar hospedagem e empresa para registrar o domínio;

•Selecionar o domínio e registrar;

•Registrar domínios parecidos com o seu;

•Elaborar a estrutura do website e informações sobre arquitetura;

•Gerar um rascunho do site para primeiras impressões no photoshop;

Layout

•Definir as fontes tipográficas;

•Pesquisar esquema de cores (paletas);

•Verificar se o esquema de cores é equilibrado; não agride nem gera indiferença em quem vê o site;

•Preocupar-se com os padrões de usabilidade e acessibilidade;

•Criação de um layout básico (eu faço no photoshop mesmo) em HTML/CSS para ser submetido à críticas;

Preparação do Conteúdo

•Montar a equipe para fornecer conteúdo (jornalistas, ilustradores)

•Apresentação do Texto (recepção/atualização/criação);

•Arte (fotos/ilustrações);

•Adicionar conteúdo específico para web;

•Distribuição do conteúdo – manter a página principal leve e efetiva;

•Providenciar uma chamada de ação para cada página;

•Definir os direitos de cópia, termos de uso e política de privacidade;

•Detalhar contatos;

•Página sobre (com autor(s), informações da empresa, créditos… );

•Testemunhos, matérias na mídia e prêmios;

•Descrição de produtos;

•Página de perguntas e respostas frequentes;

•Utilizar palavras chave (etiquetas ou tags) para referenciar conteúdo;

•Validar conteúdo através de uma revisão.

Integração do Conteúdo

•Colocar conteúdo no layout;

•Observar com atenção à hierarquia de conteúdo no layout;

•Definir cabeçalhos (h1, h2, …) e parágrafos;

•Adaptar tamanhos de fonte, espaçamento para melhorar a legibilidade;

•Escolher se você vai permitir ao visitante alterar o tamanho da fonte;

•Identificar e adicionar meta tags, meta descrições e descrições nos títulos;

•Nomear links com tags âncoras para lhes dar sentido semântico;

•Fazer os links consistentes e facilitar a identificação (estilos especiais nos links, como feeds ou emails);

•Adicionar tags “alt” sobre todas as imagens imagens;

•Providenciar um texto alternativo para todas as mídias sem “alt” tags;

Design

•Artes originais (fotos, ilustrações …);

•Logo ;

•Desenho do cabeçalho com clara demonstração do propósito do site e predominância da logo com link para a página principal;

•Adicionar um campo de busca visível no cabeçalho ou no topo da coluna direita;

•Projetar uma barra de navegação objetiva;

•Projetar o corpo do site com colunas e um rodapé;

•Certifique-se que o conteúdo ocupa uma parte relevante na página principal;

•Balancear ilustrações/fotos e texto de acordo com o propósito do site;

•Preparar aparência dos anúncios e links patrocinados;

•Visibilidade de testemunhos, matérias e prêmios;

•Certifique-se que o conteúdo e/ou o design dos elementos facilitem a futura visitação ou o compartilhamento das informações;

•Certifique-se que as informações da empresa e o contato são acessíveis (endreço, telefone …) ou seja, que eles levam o seu visitantes a confiarem na existência física da empresa;

•Se muitas escolhas são disponibilizadas (diferentes produtos do mesmo tipo) destaque claramente o principal para ajudar seus visitantes a escolherem;

•Destaque campos especiais em formulários (erros ou que necessitam de validação);

•Faça com que todos os botões e elementos “clicáveis” sejam destacados ao passar o mause por cima;

•Desenhe um “Favicon”;

•Faça uma revisão do design e envie para o cliente se for necessário;

Funcionalidades

•Construir um banco de dados;

•Implemente um Sistema de Gerenciamento de Conteúdo;

•Defina os Formulários e scripts adicionais;

•Elabore uma Newsletter (boletim de atualizações);

•Customize aplicações;

•Defina as áreas restritas (proteger painel de administração devidamente com login);

Usabilidade

•Fazer URL’s com significado e amigáveis ao visitante;

•Certifique-se que as URL’s são consistentes (www.seusite.com ou seusite.com);

•Se a navegação ou o design ficam confusos o botão de voltar oferece uma alternativa;

•Código otimizado para todos os navegadores atualizados;

•Criar uma página de erro 404;

•Certificar que o visitantes recebe uma confirmação após uma determinada ação;

•Fazer o site amigável para impressão;

•Validação e otimização do (X)HTML, CSS e JavaScript;

•Otimizar o site para que ele possa receber atualizações posteriores;

•Otimizar tamanho de imagens e arquivos;

•Proteção e .htaccess funções (anti-spam, cimpressão, cache, anti-hotlinks, banco de dados … )

Primeiro Teste (off-line – fase alfa)

•Padrões Web;

•Pesquisas de usabilidade e acessibilidade;

•Pesquisas sobre conteúdo, design, identificação;

•Testar links;

•Verificar transações (scripts);

•Corrigir erros e refazer otimização;

Manutenção 1

•Documentação;

•Upload do site para ambiente de uso;

•Colocar scripts de estatísticas e otimização (Analytics, Feedburner, …);

•Configurar agendamento de backup e testar a recuperação do backup;

Treinamento

•Particularidades do CMS, linguagem web;

•(X)HTML/CSS;

•PHP;

•Como construir uma comunidade na web (mídias sociais);

•SEO;

•Web marketing;

Marketing e SEO

•Crear um XML Sitemap;

•Configurar o robot.txt;

•Inserir o site nos motores de busca (Yahoo, Bing);

•Submeter sitemap;

•Comprar ou vender anúncios;

•Newsletter e campanhas de email;

•Monitorar contatos;

•Estimular citações e testemunhos;

•Negociar links;

•Divulgação de nicho (offline);

•Divulgação em mídias sociais (Twitter, Facebook, Digg);

•Eventos, promoções.

Segundo Teste (fase beta)

•Verificar estratégias de SEO;

•Verificar estratégias Marketing;

•Otimização;

•Banco de dados;

•Teste de segurança.

Manutenção 2

•Elaborar um relatório de conclusão e recomendações;

•Queimar CD com o site e arquivos;

•Elaborar um documento seguro com todas as informações de conta (ftp, painel de admin, email’s, …);

•Transferir direitos de cópia para a empresa contratante;

•Atualizar o portfólio;

•Realizar eventos e promoções.

Manutenção 3

•Atividades de Webmaster (feedback do conteúdo, atualizações, novos produtos, … );

•Atualizar sessão de perguntas e respostas;

•Adicionar novas funcionalidades ao site;

•Construir, monitorar e responde a comunidade;

•Colecionar informações estatísticas;

Administração do Processo

•Verificar a evolução do projeto (resultados, metas atingidas, …);

•Revisão do SEO de dois em dois meses;

•Revisão do Plano de marketing e público alvo;

•Atualização da documentação;

•Revisão das regras e responsabilidades;

Se a demanda do cliente for por uma mudança constante ou se ele possui a necessidade de gerenciar email’s da empresa mas não possui um profissional para isso. Faça um contrato com um valor mensal e esteja a disposição para realizar as alterações e orientações necessárias, pode ser o início da prestação de serviços como assessor ou consultor web.

Um forte abraço e sucesso!!!

Removendo o fundo de cabelos

Neste tutorial veremos como é possível criar recortes de cabelo usando os Channels, é de vital importância que a imagem usada seja de alta resolução para um bom resultado.

 

 

 

 

 

 

 

01. Pressione Ctrl+O e abra uma foto qualquer, no caso deste tutorial usaremos a foto abaixo, assim que abrir a foto vá em Window> Channels para abrir a paleta de Channels.

02. Encontre o Channel com maior contraste, no caso deste tutorial o Channel Blue, clique e arraste o Channel até o ícone de Create a New Channel no rodapé da paleta de Channels ou clique com o botão direito do mouse sobre o Channel e escolha a opção Duplicate Channel para criar uma cópia do Channel.

03. Pressione Ctrl+L para abrir a caixa de Levels, arraste os sliders de branco e preto para o centro do gráfico afim de aumentar o preto e branco na imagem.

04. Sua foto deverá ficar parecida com a da imagem abaixo.

05. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de tamanho médio e pontas duras, deixe todo o interior da imagem preto, pinte qualquer detalhe que esteja em branco, cinza ou que esteja aparecendo dentro da parte em preto, pressione Ctrl+I para inverter as cores, sua imagem ficará como a da foto abaixo.

06. Agora com a tecla Ctrl pressionada clique sobre a miniatura do Channel, isto ativará a seleção ao redor da foto, ative a visibilidade do Channel RGB novamente, vá em Window> Layers para voltar para a paleta de layers, pressione Ctrl+J, clique na layer original e vá em Layer> Hide Layers e você terá o recorte pronto para um novo fundo como na foto abaixo.

site de origem: http://www.photoshop-weblog.com/the-channel-trick-selecting-hair/

Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.

 

Fazendo uma imagem “saltar” para fora do frame

Descrição: Hoje veremos como estilizar uma imagem para que ela “pule” para fora de sua moldura, para isso usaremos diversas ferramentas e recortaremos a imagem.

Descrição: Hoje veremos como estilizar uma imagem para que ela “pule” para fora de sua moldura, para isso usaremos diversas ferramentas e recortaremos a imagem.

01. Pressione Ctrl+O e abra uma foto qualquer no Photoshop, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção retangular, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento pare preencher a seleção com a cor branca, vá em Select> Modify> Contract e defina o valor de 15 a 20 pixels, pressione Ok e depois pressione Delete para deletar a parte interna do retângulo, vá em Edit> Transform> Perspective e distorça o retângulo como na foto abaixo, pressione Enter para finalizar a transformação.

02. Pressione a letra W do teclado para selecionar a Magic Wand Tool, a parte interna do retângulo como na foto abaixo.

03. Clique na layer da foto e pressione Ctrl+J para duplicar a parte selecionada para outra layer, clique na layer da imagem original e vá em Layer> Hide Layers para retirar a visibilidade da layer.

04. Clique na layer do frame e defina a opacidade em 50%, clique na layer da imagem original e vá em Layer> Show Layers para ativar a visibilidade da layer, selecione a parte do tanque que sairá do frame.

05. Pressione Ctrl+Shift+I para inverter a seleção, pressione Delete, mova a layer para o topo da paleta de layers, sua imagem deverá ficar como a da foto abaixo.

06. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe esta layer abaixo de todas as outras, escolha um cor qualquer e pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento para preencher a layer com a cor escolhida, no final sua imagem ficará como a da foto abaixo.

Faça um quebra-cabeça com sua foto!

Utilizaremos a foto abaixo para fazer nosso quebra-cabeça. Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Utilizaremos a foto abaixo para fazer nosso quebra-cabeça. Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Primeiro passo: Abra a foto (menu arquivo/opção abrir).

Segundo passo: Clique no menu filtro opção textura e escolha a opção chamada de texturizador . Veja a imagem abaixo:

Quando você instala o Photoshop, automaticamente ele instala uma série de texturas. No nosso caso iremos buscar uma textura chamada quebra-cabeças. Veja a tela abaixo:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Terceiro passo : Clique no botão indicado pela seta vermelha, e aparecerá uma opção chamada carregar textura. Feito isso você terá que procurar a pasta onde encontram-se as texturas do photoshop.Veja a imagem abaixo:

 

 

 

 

 

 

 

 

 

 

 

 

Nessa pasta texturas você encontrará a textura quebra-cabeças.

Veja que, à sua direita, aparecem duas barras que deslizam: uma chamada Escala e outra chamada Relevo. Uma terceira opção chama-se Suave.

Escala: altera o tamanho das peças do quebra-cabeça.

Relevo: você pode fazer com que as peças se sobressaiam.

Suave: permite escolher a direção das peças do quebra-cabeça.

Não existe um valor específico para informar. Experimente modificar à seu critério.

Confira o resultado:

Conheça o Photoshop e altere a cor dos Olhos em Imagens

Primeiramente separamos as telas por numeração, para que você compreenda e entenda a seguinte tela.

1- O Photoshop, assim como a maioria dos programas, trabalha com menus, que oferece ao usuário diversas opções de configurações para os seus trabalhos. Exemplos de menus: Arquivo, janela etc.

Logo abaixo dos menus temos a barra de propriedades, que tem como utilidade oferecer opções de configurações das ferramentas usadas no momento.

2- A caixa de ferramentas é essencial no Photoshop. Você deve ficar atento, pois existem opções com uma pequena seta na parte inferior direita indicando que, mantendo o mouse pressionado, outras opções aparecerão.

3- As paletas no Photoshop, assim como as ferramentas, tem sua utilidade, pois através delas conseguimos fazer determinadas configurações.

Toda as paletas são habilitadas pelo menu janela (Window). Dentre todas as paletas a que mais se destaca é a paleta Camada.

Para quê serve a paleta Camada?

A paleta camada é de suma importância, pois através dela conseguimos fazer separações.

Exemplo: Imagine você pegando sua foto e mudando no photoshop a cor do seu cabelo. Imagine que você salve sem ter criado nenhuma camada para ter pintado o cabelo, só que em outro dia você enjoou daquela cor e abriu novamente sua foto e escolheu uma azul. O que aconteceu?

Resposta: Toda a foto, por inteira, ficou azul. Lembre-se de criar separações para suas montagens!

Para criar uma nova camada, basta clicar no menu camada / nova camada, ou na paleta camada clicar no botão criar nova camada.

Para ativar a paleta camada aperte a tecla F7.