Tutoriais para Designers

Ao escrever para internet, inclusive com o Wordpress, ás vezes alguns caracteres especiais ou acentuados não são corretamente exibidos.

Este site utiliza a codificação padrão do Wordpress (a que já vem configurada), UTF-8 e alguns problemas com caracteres especiais costumam acontecer, especialmente ao traduzir os temas e editar o HTML puro.

Para resolver este problema, substitua os caracteres acentuados pelo seu respectivo “código HTML”.

Exemplo:

Para aparecer um “á”, coloque ” &aacute ” no código HTML.

O á é um “&” seguido do caracter que será acentuado, no caso o caracter “a”, seguido do tipo de acento, no caso “acute” e com o “;” no fim.
Para o “ó”, fica da seguinte forma: ó

Isso funciona para todos os caracteres acentuados. Cada acento tem o seu código.

Acento agudo: acute
Acento cicunflexo: circ
Til: tilde
Cedilha: cedil
Crase: grave

Mais um exemplo, para colocar o “ç”, utilize “&ccedil” no código HTML onde havia um “ç”.

Assim, o caracter vai aparecer corretamente no browser.

Neste tutorial veremos como estilizar um texto para conseguir um resultado final dark, para isso usaremos filtros, modos de blend e caso seja necessário alguns brushes.

01. Pressione Ctrl+N para criar um novo documento, defina o tamanho de 550x350 pixels, modo de cor em RGB com 72 dpi´s, pressione Ok, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, vá em Filter> Render> Fibers, defina o valor de 15 para Variance, 4 para Strength e clique em Ok, você também pode clicar em Randomize caso queira outro tipo de textura.

02. Pressione Ctrl+S e salve a textura que criamos como um arquivo .PSD, agora pressione Ctrl+U para abrir a caixa de Hue/Saturation, defina os valores abaixo e pressione Ok.

03. Sua imagem ficará como a da foto abaixo.


04. Agora pressione Ctrl+M para abrir a caixa de Curves e defina a curva como na foto abaixo.


05. Sua imagem ficará como a da foto abaixo.


06. Agora vá em Window> Channels para abrir a paleta de Channels, com a tecla Ctrl pressionada clique sobre a miniatura do Channel RGB, isto irá ativar a seleção no documento, pressione Ctrl+U para abrir a caixa de Hue/Saturation, defina o valor de Hue em 100 e Saturation em -56, pressione Ok, pressione Ctrl+D para desabilitar a seleção.


07. Agora pressione a letra T do teclado para selecionar a Horizontal Type Tool, no caso deste tutorial foi escrito PSdeluxe usando a fonte Comic Sans Ms mas sinta-se a vontade para usar a fonte que achar melhor, escolha a cor vermelha, depois de escrito o texto pressione Ctrl+T para abrir a caixa de Free Transform, rotacione levemente o texto como na foto abaixo e pressione Enter para finalizar a transformação.

08. Defina tamanhos diferentes para cada letra da palavra.

09. Agora vá em Filter> Distort> Displace, na caixa de diálogo que aparecerá clique em Yes para rasterizar o texto, defina o valor de Horizontal e Vertical Scale em 8 pixels, escolha o arquivo .PSD que salvamos no começo do tutorial e pressione Ok, sua imagem deverá ficar como a da foto abaixo.

10. Agora clique na layer Background, pressione Ctrl+A para ativar a seleção no documento, vá em Filter> Distort> Spherize, escolha a opção Horizontal e defina o valor de 60% para Amount, pressione Ok, agora clique na layer de texto e pressione Ctrl+F para reaplicar o filtro na layer.

11. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, 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 preta, deixe esta layer abaixo da layer com a textura de madeira que criamos, clique na layer com a textura e pressione Ctrl+T para abrir a caixa de Free Transform, redimensione a largura da textura clicando e arrastando um dos pontos laterais da caixa de Free Transform, deixe como na foto abaixo e pressione Enter para finalizar a transformação.



12. Agora pressione a letra G do teclado para selecionar a Gradient Tool, escolha um gradiente que vá do transparente para o preto, pressione Ctrl+shift+Alt+N para criar uma nova layer, escolha um gradiente do tipo Reflected, clique no meio do documento e arraste até a borda, sua imagem deverá ficar como a da foto abaixo.

13. Agora clique na layer de texto e mude o modo de blend da layer para Color Burn, pressione Ctrl+J para duplicar a layer, mude o modo de blend da layer para Linear Light, defina o valor de Fill em 30%.

14. Agora vá em Layer> Layer Style> Bevel and Emboss, defina o valor de Depth em 40%, Size em 5 pixels e Soften em 0%, vá na opção Contour e dento da caixa de Contour escolha a opção Cove Deep, pressione Ok, caso queira adicionar mais detalhes você pode usar o set de brushes usado neste tutorial clicando aqui, depois basta criar mais uma layer e aplicar os brushes para decorar seu texto.



Fonte:Tutoriais Photoshop

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo:

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra
(por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade
(por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Ver os exemplos abaixo:

p {
font-size: 12px; /* ponto-e-vírgula é facultativo */
}

body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body {
background: #FFFFFF;
}

Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ':

h3 {
font-family: "Comic Sans MS"
}

Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, como mostrado abaixo:

p {
text-align: right;
color: #FF0000;
}

Isto não é obrigatório! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:

p {text-align: right;color: #FF0000;}

NOTA: A razão do uso de ponto e vírgula na última declaração ou mesmo quando só há uma declaração é que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declarações e a última declaração quase nunca é a última na fase de projeto. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula.!!!!

Fonte: Maujor

Otimização para sistemas de Busca é um conjunto de regras e métodos usados para melhorar o posicionamento (PageRank™) de websites na listagem de resultados das Máquinas de Busca e pode também ser considerado um subconjunto de regras para o marketing em sistemas de Busca.

O termo SEO (do inglês, Search Engine Optimizers, Acrônimo SEO) também se refere a indústria de consultoria, que trabalham na otimização de projetos e websites de seus clientes. Alguns comentáristas, e também alguns profissionais de SEOs, dividiram os métodos usados por seus praticantes em categorias como os "SEO de chapéu branco" (geralmente utilizam métodos aprovados pelos sistemas de busca, como a prática de construção de conteúdo e melhoria da qualidade do site), ou "SEO de chapéu negro" (utilizam truques como "cloaking" (camuflagem do conteúdo real da página) e spamdexing). O termo `spamdexing´ (originado da fusão de spam e indexing) refere-se a pratica de Spam direcionada aos motores de busca.

Os praticantes de técnicas do Chapéu Branco dizem que os do Chapéu Negro se valem de métodos que são vistos como tentativas de manipular o posicionamento nos resultados das Máquinas de Busca a seu próprio favor. Praticantes do Chapéu Negro dizem que todas as tentativas e técnicas utilizadas para manipular o posicionamento são legítimas, e o tipo de técnica utilizada para se alcançar o objetivo de melhorar o rank é irrelevante.

As Máquinas_de Busca indicam diferentes tipos de listagens nas páginas de resultados, incluindo: publicidade paga nas páginas de resultados, (SERPs), includíndo: conteúdo de publicidade paga por click, anúncios, pagamento para inclusões em sistemas de busca e resultados de busca orgânica. As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes terminam a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo). Os serviços de Otimização para Sistemas de Busca normalmente é oferecido como um serviço autônomo, ou como parte de um projeto de Webmarketing, e pode ser muito eficaz quando incorporado no início do desenvolvimento dos projetos iniciais de um website.

Em termos de competição, com grande volume de termos para busca, o custo de anúncios para pagamento por click pode ser bem expressivo. Um bom posicionamento nos resultados orgânicos de busca pode fornecer o mesmo tráfego almejado e ter um custo potencialmente mais baixo significativamente. Os proprietários de websites devem optar por otimizar seus sites para a busca orgânica, se o custo do otimização for menor do que o custo da publicidade paga.

Nem todos os sites têm objetivos idênticos para o otimização em sistemas de busca. Alguns querem atingir todo o tipo de tráfego na rede, e podem ser otimizados para incrementar a busca de frases comuns. Uma boa estratégia para otimização nos sistemas de busca pode funcionar perfeitamente com sites que tenham interesse em atingir um grande público-alvo, tais como Informativos Periódicos, serviços de diretórios, guias, ou sites que exibem publicidade com um modelo baseado em CPM. Em contraste, muitas empresas tentam otimizar seus sites para um grande número de palavras-chave altamente específicas que indicam a prontidão para venda. Otimizações deste tipo, tendo em vista um amplo espectro de termos para busca pode impedir a venda de produtos por gerar um grande volume de requisições com baixa-qualidade, com um custo financeiro alto e resultando em pequeno volume de vendas. Focalizar a qualidade do tráfego gera melhor qualidade nas vendas, permitindo que sua equipe de vendas feche negócios mais rentáveis. A otimização para sistemas de busca pode ser muito eficiente quando usada como parte de uma estratégia de Marketing.

Fonte: Wikipédia

O que é CSS ? e Web Standards ?

CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como:

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.

Web Standards pode ser traduzido como Padrões Web e tem por objetivo a criação de uma Web universal.

Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.

Por que CSS ?

A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.

HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à apresentação.

A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são conseguidos quando se utiliza o conceito largamente empregado para construção de web sites, baseado no uso de tabelas e de atributos de estilização dentro das tags HTML.

Projetar um site navegável tanto em monitor de 1280x1024 quanto em uma telinha de 320x240 de um PDA, com utilização da mesma marcação é fantástico e possível. Basta projetar de acordo com as Web Standards entregando às CSS a missão de acomodar o conteúdo na tela!

Algumas restrições (à época deste escrito - 2003) ainda freiam o uso pleno geral e irrestrito de CSS na Web. As restrições são por conta da incapacidade de alguns browsers em dar suporte total às CSS. Com o passar do tempo a tendência é a de cair em desuso total os browsers antigos que não suportam ou mesmo suportam parcialmente CSS. Soma-se a favor das CSS a normatização que o W3C vem implementando sobre o assunto e o desejo dos fabricantes de se adequar àquelas normas. É uma questão de tempo!

O poder das CSS

INTRODUÇÃO

Trata-se um tutorial sobre utilização do painel estilos do Dreamweaver para construir uma barra de navegação e foi desenvolvido em DW-MX.

O código da barra de navegação

Crie um arquivo no qual você pretende adicionar a barra de navegação. Vamos chamá-lo "barNav.html".

Construiremos uma barra de navegação com três links dispostos em linha, um após o outro. Óbvio isso né? Afinal trata-se de uma barra de navegaçao!

Mas, é muito frequente, na prática, encontrarmos nossas soluções em coisas óbvias e aqui é um bom exemplo.

A constatação óbvia acima, nos leva de imediato a concluir um código bem simples para "enclausurar" e depois estilizar a barra de navegação.

uma linha ----> um parágrafo HTML;

três links ----> três tags a HTML;

...e, nasce o primeiro embrião da nossa barra de navegação o código HTML:

HOME

DWFORUM

MAUJOR

Próximo passo: Estilizar as tag's p e a.

Não vamos querer que TODOS os parágrafos da página tenham o mesmo aspecto da barra de navegação e assim usaremos uma classe para aplicar no parágrafo que contém a barra de navegação.

Chamemos a classe de .barNav e vamos ao no Shift+F11

1 - ETAPA: Definindo os estilos para uma classe que chamaremos --->.barNav

Abra o painel Estilos CSS (tecla de atalho Shift + F11) e clique em Novo estilo CSS

Painel - Estilos CSS

Na caixa Novo estilo CSS, marque Tipo: Utilizar o seletor CSS - Definir em: Apenas este documento - Seletor: Digite .barNav a Clique OK.

NOTA: Antes de digitar, certifique-se de que a marcação do Tipo esteja em: Utilizar o seletor CSS, pois caso contrário o DW retornará uma mensagem "chiando" com a sintaxe digitada.

Aqui estamos definindo um seletor para estilizar a tag a contida no elemento HTML (no nosso caso o parágrafo) com classe barNav.

Caixa - Novo estilo CSS

Na caixa Definição de estilos CSS de .barNav a, na Categoria Tipo marque, Fonte:Arial, Helvetica, Verdana, sans-serif - Tamanho: 14 - Peso: negrito - Cor: #000000 - Decoração: Nenhuma.

Difinição de estilos CSS de .barNav a - Tipo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Fundo marque, Cor do fundo:#00FF00.

Difinição de estilos CSS de .barNav a - Fundo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Bloco marque, Alinhamento do texo:centro.

Difinição de estilos CSS de .barNav a - Bloco

Passe para a Categoria Caixa e marque Largura, Preenchimento e Margem, conforme mostrado na figura abaixo. ATENÇÂO: No Preenchimento, desmarque "Idêntico para todas" e na Margem deixe marcada "Idêntico para todas", pois estamos definindo preenchimentos deferentes nos lados da caixa e borda de zero pixel, nos quatro lados da caixa.

Difinição de estilos CSS de .barNav a - Caixa

Passe para a Categoria Borda e defina Estilo, Largura e Cor, conforme mostrado na figura abaixo. ATENÇÂO: Deixe marcada as caixas "Idêntico para todas", pois estamos definindo bordas iguais, nos quatro lados da caixa.

Difinição de estilos CSS de .barNav a - Borda

E aqui, acabamos de criar o estilo para a nossa tag a dentro da classe .barNav.

Os links já estão com letras na cor preta (#000000), dentro de um retângulo verde (#00FF00) com bordas pretas (#000000).

Uma "Barra de Navegação" pode ter até 4 estados diferentes, refletindo cada um, uma ação do usuário:

1). Imagem Ativa (UP) > ponteiro do usuário esta fora da imagem ;

2). Imagem Sobreposta (OVER) > ponteiro do usuário esta sobre a imagem ;

3). Imagem Inativa (DOWN) > o usuário clicou na imagem ;

4). Imagem Sobreposta enquanto tiver Inativa (OVER WHILE DOWN) > o ponteiro do usuário esta sobre a imagem, depois que ela foi clicada.

Com CSS:

1) o estado "UP" já está estilizado;

2) o estado "OVER" é estilizado com a:hover que mostrarei a seguir;

3) o estado "DOWN" é estilizado com a:active que mostrarei a seguir;

4) o estado "OVER WHILE DOWN" não tem equivalente em CSS;

5) mas, temos o estado "VISITED" para links já visitados com a:visited, que não usaremos neste tutorial.

2 - ETAPA:Definindo os estilos para a:active

Painel Estilo CSS --> Novo estilo CSS --> Utilizar o seletor de CSS --> Definir em apenas este documento --> Seletor:digite .barNav a:active --> OK;

Caixa Tipo--> Cor: #CCCCCC; Caixa Fundo--> Cor do fundo: #000000;Caixa Borda--> Estilo--> solid - Largura--> 2px - Cor: #CCCCCC;

E aqui, acabamos de criar o estilo para a:active.

3 - ETAPA: Definindo os estilos para a:hover

Painel Estilo CSS --> Novo estilo CSS --> Utilizar o seletor de CSS --> Definir em apenas este documento --> Seletor:digite .barNav a:hover --> OK;

Caixa Tipo--> Cor: #00FF00; Caixa Fundo--> Cor do fundo: #000000;Caixa Borda--> Estilo--> solid - Largura--> 2px - Cor: #00FF00;

E aqui, acabamos de criar o estilo para a:hover.

PRONTO! Terminamos de criar a CSS para nossa barra de navegação.

O Código CSS gerado em sua página será o seguinte:

E finalmente o teste pra confirmar se esta tudo certinho:

No arquivo que você criou "barNav.html" e onde gerou o código CSS, digite o HTML da barra de navegação na janela de código do .

Insira as tag's dentro da tag

tudo como mostrado no início deste tutorial.

Observe o código HTML abaixo:

.........................







HOME

DWFORUM

MAUJOR



........................

Bom por hoje é isso!

Este tutorial foi tirado de: http://maujor.com/tutorial/mat_barNav.php

Vamos desenvolver um simples formulário de contato, bem simples mesmo, porém, de extrema funcionalidade em nosso site um formulário de contato.

Neste formulário que iremos desenvolver terá apenas 4 campos; NOME, EMAIL, ASSUNTO e MENSAGEM, e possuirá apenas 2 arquivos, sendo eles o formulário.html e o envia.php. O formulário.html terá os campos que será preenchidos, enquanto o envia.php fará a validação dos campos preenchidos, isso através da função mail.

Para o tutorial não ficar tanto quanto complexo, mostrarei apenas como funcionam os campos do formulário e a validação do e-mail, ou seja, o quesito beleza não será nosso alvo, até porque você mesmo pode personalizar seu formulário, bastando apenas entender no mínimo HTML.

Base de conhecimento para acompanhar este tutorial:
-Saber HTML.

Abra o dreamweaver e crie um novo documento HTML. Em seguida salve-o como formulario.html



Clique na aba FORMS, em seguida clique em FORM.
O form é o responsável por enviar os campos preenchido para o validador, que no caso é envia.php.



O Pontilhado vermelho que você está vendo é o form.

1-Form.
2-Em ACTION digite envia.php.



Note que digitei nome, em seguida inseri um TEXTFIELD. Faça o mesmo.

Depois de inserir o TEXTFIELD, clique sobre ele.

Veja:



No inspetor de propriedades irá aparece algumas configurações para o textfield. No momento, o que nos interessa é apenas o campo textfield. Nomeie o textfiel para nome, para o campo nome. Recomendável que você digite tudo maiúsculo.

Agora faça você mesmo o mesmo processo que fizermos anteriormente. Crie o campo EMAIL e ASSUNTO e nomeie o textfield com email para email, e assunto para assunto.

Resultado:



Seu formulário deverá ficar assim, caso você esteja acompanhando o tutorial passo a passo.

Agora vamos criar um TEXTAREA. O TEXTAREA será o campo onde é possível que a pessoa digite seu texto.



Clique em TEXTAREA.

Resultado:



Lembrando que você deve nomear o campo textarea como mensagem.

Veja:



Para completar o formulário.html, está falando o botão para enviar os dados preenchido para o envia.php.



Clique em Button para adicionar um botão para nosso formulário.

Resutado:



Isso é fácil, você já deveria saber. O único segredo é nomear os campos no inspetor de propriedades. Pois estes nomes é que farão com que o envia.php saiba que os campos foram preenchido. Se você nomear errado, tanto no formulario.html, quanto envia.php, haverá erro e o email chegará em branco.

Feche o formulário.html.

Agora vamos criar um novo documento em PHP. Este se chamará envia.php.

Deixe o envia.php no modo código.