Demonstração / Download

Primeiro vamos ao conceito.Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta la ganhando o pão de cada dia e se depara com um menu como este…não é mais facil usar o famoso CTRL+C e CTRL+V? pois bem, este é o conceito…e acredite, sua produtividade vai aumetar e muito...chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job ta atrasado…ta bom, eu apelei mais é essa a intenção.
É claro que cada menu é diferente um do outro e tals, enfim…o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui…outro ali…e voala…menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

• PDF

2. HTML Cheat Sheet

• PDF
• PNG

3. HTML Character Entities Cheat Sheet

• PDF
• PNG

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

• PDF
• PNG

6. CSS Cheat Sheet

• PDF
• HTML

7. CSS Shorthand Cheat Sheet

• PDF

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

• PDF
• PNG

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

• PDF

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

• PDF

17. mootools 1.2 cheat sheet

• PDF

18. jQuery Cheatsheet

• PNG

19. jQuery 1.2 Cheat Sheet

• PDF

20. jQuery Visual Map – PNG

Variados

21. RGB Hex Colour Chart

• PDF
• PNG

22. The Web Developer’s SEO Cheat Sheet

• PDF

23. The WordPress Help Sheet

• PDF

Alias vamos ao creditos:
Six Revision – Excelente site, apesar de ser em inglês…recomendo a todos

Até a próxima.

As Mentiras:
- Faça esse de graça que no próximo a gente se acerta.
Todo freelancer cai nessa quando faz o 1º trabalho, mas o 2º nunca vem. Ainda tem a desculpa: “é só para saber se você é bom mesmo”.

Novos freelancers…Jamais caia nessa, pelo amor de Deus…eu graças a Deus nunca passei por isso e se passase eu no mínimo iria xingar o cliente.Aqui vai uma tecnica:
Procure saber qual é a profissão do cliente.Suponhamos que ele é um pedreiro…diga o seguinte:

- Constroi uma casa aqui pra mim DE GRAÇA que na 2ª a gente acerta…

Ele vai sentir na pele como é…ai ou você ganha o cliente pra sempre e faz ele rir ou, perdeu boy!

- Pago quando receber a versão final.
Falou essa frase cai fora…clientes antigos e confiáveis até podem ter essa liberdade, mas novos clientes… E mesmo que termine, pode dizer que não quer mais. E aí? Foi tempo perdido. Por isso contratos são indispensáveis.

O que recomendo fazer é:

• Entrada de 30% ou 50%;
• E o restante no momento da entrega do trabalho…mais tenha sempre uma carta na manga…

- Esse trabalho vai te dar muita visibilidade e gerar inúmeros negócios novos.
Isso pode até ser verdade de fato. O problema é que essa frase geralmente é usada como argumento para baixar (e muito) o preço. Se você já começa fazendo um mal negócio, as indicações chegarão querendo um acordo semelhante.
Alguns até dizem algo parecido, como:

- Agora a gente não tem como pagar porque é um projeto novo, mais quando ele expandir a gente te paga..
To cansando de ouvir isso, ah se eu mostrasse as conversas que tenho no MSN pra vocês…Pessoal entenda, se o cara que faze um site e não tem grana pra te pagar agora, qual é a possibilidade de te pagar depois?

- Bom, não sei se vou fazer o trabalho com você, mas deixe aqui seu material que vou conversar com meu parceiro/investidor/esposa/clero.
Duas situações possíveis: você não está falando com quem toma a decisão na empresa, ou você acaba de prestar consultoria para um concorrente. No primeiro, tente sempre falar com quem toma as decisões, caso contrário um telefone sem fio acontece e sua defesa já era. No segundo, o cliente liga para um concorrente seu e barganha preço, que vai poder cobrar mais barato, pois todo o trabalho criativo você já fez. Não deixe nada que você gastou horas para fazer na mesa alheia.Fiquem espertos…

- O trabalho não foi cancelado, só adiado. Mas em um mês ou dois eu entro em contato.
Resultado da segunda mentira. Pode ser uma desculpa para não pagar pelo trabalho feito até então. Se bater a curiosidade, ligue em 2 meses para descobrir quem ficou no seu lugar.Por isso eu bato novamente nessa tecla, tem que dar uma entrada, se ele cancela quem sai no prejuizo é ele, não devolve a grana não…é importante um contrato tambem, joga lá que se houver cancelamento o cliente deverá pagar uma multa, sei la…pensa em algo maligno ai, kkkkkkkkkkkkk

- Pra quê contrato?
Para se resguardar de metade dos itens aqui listados.se você sentir que tem tudo sobre controle, que não será preciso…faça do mesmo jeito

- Mande-me a conta(bancária) quando o trabalho estiver terminado.
Nunca, jamais, em ipotese alguma deixe isso acontercer…uma das primeiras coisas que se deve deixar claro é a sua conta, assim o cliente não vai poder dar a desculpa de que perdeu a sua conta e por isso ainda não depositou…Passe a conta para ele e na proxima conversa que tiver com ele pergunte a ele qual é a sua conta…E mais uma vez é provado a importancia da entrada antes de iniciar um trabalho, projeto, site, o que for…

- O último cara fez isso por tantos reais.
Se o último cara fosse bom o suficiente o cliente não estaria conversando com você agora, não é mesmo? Cobre um preço justo e segure-o. Parasitas sempre irão existir em qualquer mercado, mas se o seu preço reflete a qualidade do seu trabalho, mantenha-o.E vocês que ja são mais experientes ja devem saber que se deve jogar um precinho mais alto, porque todo cliente “chora”, ai você da “aquele desconto” e ganha o desejado, hehhehehehe

- Nós só temos tanto para gastar.
Menos dinheiro, menos trabalho. Não abandone um cliente porque ele não tem o quanto você está cobrando, mas reduza os recursos. Aquela área inovadora que demorava 3 meses para fazer talvez possa esperar mais um pouco.

Basicamente é isso, se quiserem compartilhar mais mentiras fiquem a vontade e cuidado pra não cair em uma dessas…
Até a proxima.

Graças a Deus eu achei uma palestra feita pelo Sandro Reiller no Instituto Infnet sobre como calcular o custo de desenvolvimento de um site e cobrar do cliente de maneira adequada.

Exitem vários foruns de discursão, comunidades no orkut que abordam esse tema mais o certo é, essa  questão e nem essa paletra, como diz o proprio Sandro Reiller não vai solucionar seus problemas, mais sim auxilia-lo na sua decisão…

Chega de papo e vamos os video que vocês devem estar loucos para verem, hehehheheh

Ver video

Obs.EU TAMBEM ESTOU DE SACO CHEIO DE VER PESSOAS COBRAREM R$100 (CEM REAIS) POR UM SITE..aff

Depois coloquem a sua opinião aqui nos comentarios e os seus metodos para aprendermos mais…
Até a proxima.

Falar sobre isto é simples e complicado ao mesmo tempo, primeiramente vamos voltar a uns 5-10 anos atrás. Os sites eram cheio de texto para todos os lados, confundia muito o visitante, ficava perdido sem ter noção de onde ir.

Hoje já sabemos que a melhor forma é pouco texto (nem sempre) e uma navegação fácil, devemos “mostrar o caminho” para o visitante seguir em frente e atingi nosso objetivo (vender, conseguir um retorno…).Temos que pensar também no publico alvo, você não vai fazer um site “sanguinário” para uma criança visitar né…
Se eu fosse escrever tudo detalhadamente só ano que vem terminaria, então vou listar algumas qualidades “minimas” que um webdesigner deve ter, qualidades nas quais são muitos requisitadas por todos:

Domínio de CMS’s

CMS hoje é tudo, é necessário um conhecimento amplo nesta área, estude,crie templates(mesmo que não traga lucros, o importante é aprender…) módulos, plugins(aqui ta mais pra programador )… para softwares(CMS) como Joomla, WordPress, Drupal, MovableType entre outros…

PSD para XHTML

Javascript

Flash

Hoje vou falar sobre as cores.Uma parte fundamental na criação de um website.

-Mas porque? Você pode me pergunta.Porque eu preciso saber disso?
Pois bem, infelizmente nos cursos de webdesigner não são abordados temas de como cobrar(em breve falarei sobre isto), sobre a psicologia e a função das cores em um site, entre outros… e nos temos que aprender na marra ou errando, e é isso que vou fazer poupa lhes desses erros somente por falta de conhecimento.

-Mais Mateus Eu ainda não entendi.
Vou lhe dar um exemplo, o cliente quer um site preto, como você irá convencê-lo de que esta não é a melhor forma?De que o branco por exemplo, será a melhor opção? Por isto é importante saber sobre este tema que é pouco abordado na web. Há aqueles que falam, “O cliente sempre tem a razão, se ele quer assim, assim será…“, ai está um dos grandes erros de alguns webdesigners.Somos formados, fazemos cursos é justamente para isso, você é o designer você obrigatoriamente tem que saber “por onde ir”, como fazer com que o visitante goste do que ele veja, digamos assim você é um desenhista profissional (design) e vai desenha uma pessoa, se você passar este trabalho para uma criança que mal sabe desenhar(o cliente) a diferença será vista de longe.Mais teoricamente podemos dizer:

O designer deve ter bastante criatividade, método, disciplina e conhecimento técnico e cultural. Quanto mais se estuda o meio de atuação da área onde ele pretende atuar e se exercita a observação e o olhar crítico, mais recursos se têm para gerar uma solução.

Sendo assim é muito importante o conhecimento para questões como a citada acima.Bom chega de papo furado e vamos ao que interessa:

Psicologia das Cores

A escolha das cores é fundamental para uma boa harmonia dos elementos de um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os elementos da página.

A cor exerce influência decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa. A combinação das cores afeta o psicológico e pode tornar um ponto importante no interesse do público em seu site ou no site do cliente.

A combinação certa pode causar efeitos como de excitação, urgência, contentamento, calma, vulgaridade, melancolia, segurança etc., e ainda destacar algum elemento em relação a outro(cabuloso né )

Na Web a seleção de uma cor é um pouco complicada, pois é impossível garantir que uma determinada cor irá se apresentar no monitor do usuário como ela realmente é, ou seja, como a que o designer colocou.

Isto acontece devido ao fato de cada monitor ter uma especificação diferente, uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e etc., e ainda cada um pode estar configurado com uma determinada resolução como 640×480 pixels, 800×600 pixels e assim por diante.

A combinação desses fatores é que irá determinar a fidelidade e a reprodução de cores e a qualidade das imagens.

Abaixo você poderá visualizar algumas sensações “psicológicas” conhecidas:

As cores e os efeitos psicológicos

Sensações visuais + significado:

- Branco – pureza
- Preto – negativo
- Cinza – tristeza
- Vermelho – calor, dinamismo
- Rosa – graça, ternura
- Azul – pureza, fé

Obs.Sendo assim meu site é puro e dinâmico, olha lá pior que é mesmo, hehehehehh). Ei, o fundo é cinza.O fundo representa os outro webdesigners, chatos , eu não, sou feliz e alegre….
Sensações Acromáticas

Branco: inocência, paz, divindade, calma, harmonia, para os orientais pode significar morte, batismo, casamento, cisne, lírio, neve, ordem, simplicidade, limpeza, bem, pureza.

Preto: sujeira, sombra, carvão, fumaça, miséria, pessimismo, melancolia, nobreza, seriedade. É expressivo e angustiante ao mesmo tempo. Alegre quando combinado com outras cores.

Cinza: pó, chuva, neblina, tédio, tristeza, velhice, passado, seriedade. Posição intermediária entre luz e sombra.

Sensações Cromáticas

Vermelho: guerra, sol, fogo, atenção, mulher, conquista, coragem, furor, vigor, glória, ira, emoção, paixão, ação, agressividade, perigo, dinamismo, baixeza, energia, revolta, calor, violência.

Laranja: prazer, êxtase, dureza, euforia, outono, aurora, festa, luminosidade, tentação, senso de humor. Flamejar do fogo.

Amarelo: egoísmo, ciúmes, inveja, prazer, conforto, alerta, esperança, flores grandes, verão, limão, calor da luz solar, iluminação, alerta, euforia.

Verde: umidade, frescor, bosque, mar, verão, adolescência, bem-estar, paz, saúde (medicina), esperança, liberdade, paz repousante. Pode desencadear paixões.

Azul: frio, mar, céu, horizonte, feminilidade, espaço, intelectualidade, paz, serenidade, fidelidade, confiança, harmonia, afeto, amizade, amor, viagem, verdade, advertência.

Roxo: fantasia, mistério, egoísmo, espiritualidade, noite, aurora, sonho, igreja, justiça, misticismo, delicadeza, calma.

Marrom: cordialidade, comportamento nobre, pensar, melancolia, terra, lama, outono, doença, desconforto, pesar, vigor.

Púrpura: violência, furto, miséria, engano, calma, dignidade, estima.

Violeta: calma, dignidade, estima, valor, miséria, roubo, afetividade, miséria, calma, violência, agressão, poder sonífero.

Vermelho-alaranjado: sexualidade, agressão, competição, operacionalidade, desejo, excetabilidade, dominação.

A escolha da cor sofre influência da moda, das tendências e da decisão do designer.

Harmonia e Contraste

Espaços em branco podem ser definidos como áreas que não contenham textos, imagens ou qualquer outro elemento gráfico. Saber balancear o conteúdo e o espaço em branco em um site é a chave para manter a harmonia dos elementos dentro da página e prender a atenção do usuário.

A conseqüência da má utilização desse recurso é não ter um bom equilíbrio, assim os olhos ficam confusos pois não existirá uma progressão visual para o internauta seguir e conseqüentemente ele perderá o interesse pela página.

O que pode ser feito para que isto não aconteça é seguir as recomendações de alguns “gurus” em design:

“Não coloque o máximo de informações dentro de uma página”.

“Os espaços vazios reforçam a unidade de grupos, harmonizam as áreas, aumentam o contraste e facilitam a visualização e leitura”.

Em geral as cores claras e quentes elevam e expandem, por isso, no passado era comum casas com o teto pintado de azul e paredes amarelas, a sensação que passava era de mais espaço. Por exemplo, nunca se deve pintar um teto de preto ou roxo, essas cores passariam a sensação de opressão e clausura.

Visibilidade

Amarelo e Azul são as cores que melhor se lêem a distância

O contraste preto-amarelo se vê desde mais longe

O contraste preto-branco tem um valor neutro

O contraste vermelho-verde é o que menos se percebe

Em geral os elementos gráficos escuros sobre fundo claro se percebem melhor que o contrário.

Bom agora mãos a obra, recomendo que guarde este post nos favoritos e visite sempre que precisar. Se mesmo assim surgir dúvidas faça comentários, comente a vontade.Até a próxima.