Cross-browser é a expressão utilizada para um site que funciona em todos os navegadores em diferentes versões. Ao decorrer do tempo, surgimento de novos browsers, novas versões betas e oficiais sendo lançadas para novos suportes e correção de bugs, essa tarefa costuma ser um pouco difícil.

Já fiz um post referenciando alguns plugins e programas para auxiliar nesse trabalho. Entretanto neste post quero sugerir que visite a ferramenta online Adobe BrowserLab, que tem funcionalidades excelentes.

Adobe BrowserLab

O funcionamento é simples, você escolhe quais browsers quer testar, executa a url e recebe os prints na mesma tela. Existem diversos serviços similares, como o Browsershots. Para justificar o uso do Adobe BrowserLab, veja algumas opções que me interessaram:

• Apesar de lento, por precisar esperar gerar o printscreen nos browsers selecionados, é mais veloz que a maioria dos serviços online deste gênero.
• É possível fazer comparação das imagens no modo split.
• Exibição de réguas para auxiliar na identificação de possíveis bugs causados por browsers (devia nem chamar de browser, resumindo, problemas do Internet Explorer) de CSS.
• Para os mais perfeccionistas tem a opção Onion Skin, na qual duas telas são mescladas para verificar pixel por pixel.

É uma excelente opção principalmente para usuários Mac, que tem dificuldade em testes dos navegadores para Windows. A recomendação ideal para estes usuários é a instalação de uma máquina virtual com Windows. Sugiro a utilização do aplicativo VMWare, que utilizo no dia a dia. Também tem o Parallels, mas entre ambos o VMWare apresentou um melhor desempenho, exigindo menos memória ram da minha máquina.

Em 2011 o Buscador Google fez um avanço que mudou a vida de muitos webmasters e desenvolvedores, adaptou seus algoritmos para determinar que o tempo de carregamento dos sites se tornar-se um critério realmente importante para o posicionamento e rankeamento dos mesmos. A otimização de performance em um site envolve diversos fatores e tecnologias, como programação, servidores, codificação, número de imagens, requisições http, dentre outras.

Compressão de CSS

O que é?

Ao codificar um arquivo CSS, inserimos naturalmente uma quantia enorme de “espaços” e quebra de linhas. Entretanto, como todo arquivo de texto, cada caractere adiciona um byte ao tamanho final do arquivo, espaços em branco e quebra de linhas nada mais são que caracteres. “Ah fala sério, se eu reduzir bytes do meu CSS vai mudar tanto assim?” Absolutamente sim.

Trabalhando da forma ideal

Aprendendo, abrindo códigos fonte ou fazendo cursos, somos influenciados a usar espaçamentos desnecessários, que na verdade só atrasam o tempo de trabalho. Veja a forma mais comum utilizada:

CSS Tradicional

O ideal é ter o costume de já trabalhar de forma comprimida, não utilizando mais a quebra de linhas entre as propriedades. Dessa forma:

CSS Comprimido

A primeira impressão que temos é que a legibilidade para trabalhar fica muito ruim e atrasa. Como alguém que já fez tal migração de metodologia, posso afirmar com certeza que a forma compacta é melhor, principalmente tratando de sites de médio a grande porte, onde a quantidade de linhas cresce absurdamente. Mais linhas, maior a barra de rolagem, é uma verdadeira dificuldade editar tais arquivos.

Dicas

Padronize os nomes de classes e ids que você utiliza, além de facilitar na leitura você poderá recorrer ao atalho ctrl+F (cmd+f) para buscar a classe específica e não perder tempo com a barra de rolagem.

Compressão

Apesar de ter acabado de citar a palavra “comprimido”, essa ainda não é a compressão final, ela deve ser feito manualmente ou com ajuda de algum aplicativo, eliminando qualquer espaço e quebra de linha para reduzir seu código (esse sim fica impossível de se trabalhar quando quiser fazer alterações).

Compressão CSS

Confira sites para otimizar e comprimir arquivos CSS, mas lembre-se de sempre ter um backup do arquivo original, para eventuais atualizações.

• CSS Optimizer
• CSS Drive – CSS Compressor
• Icey CSS Compressor
• CSS Compressor
• Clean CSS
• Arantius CSS Compressor
• CSSTidy
• Online Css Compressor

Outra otimização muito importante a ser feita através de CSS são sprites, veja em: Tutorial Como usar CSS Sprites

Desenvolvedores web que já tenham um tempo de estudo certamente já ouviram falar da técnica CSS Sprite. Se você nunca ouviu falar, vai aprender através deste tutorial. Apesar de vários blogs já terem publicado artigos e tutoriais sobre o assunto, quero abordar alguns detalhes pouco explorados. Vamos nessa!

Para que serve CSS Sprite?

A técnica CSS Sprites tem como objetivo melhorar consideravelmente a performance de um site, unindo todas as imagens de plano de fundo em um único arquivo. Existem diversos fatores que prejudicam a performance de um site, o mal uso das imagens é um dos principais.

1. Para cada arquivo, existem dados minúsculos que definem a data de criação, etc. Pode ser ínfimo para um ou dois arquivos de imagem, mas quando trabalhamos com muitas, acima de 30 por exemplo, a necessidade de eliminar esses dados é maior.
2. Cada arquivo que seu site precisa carregar vai gerar uma requisição http, que nada mais é que solicitar baixar o arquivo de um servidor. Imagine que você tem 20 imagens compondo seu layout (sem contar com imagens dentro de um post), serão 20 requisições http. Através do CSS Sprite você reduzirá 20 requisições http para 1 requisição.
3. Quando fazemos efeito hover, se usarmos 2 arquivos de imagem diferente, após passar o mouse no elemento tudo ficará vazio, pois só então o arquivo foi requisitado e apenas aparecerá quando seu navegador terminar de baixá-lo.

Antes de mais nada, será preciso trabalhar com dois programas, um programa de edição de imagens e outro programa para edição de arquivos CSS.

Preparando a imagem

Utilizarei o programa Photoshop (não é regra). Utilize o programa de edição de imagens de sua preferência. Farei um exemplo com ícones, o exemplo mais comum e fácil de explicar. Primeiro passo, entre em um site de icones e escolha alguns para fazermos o teste (quem manjar bem de design, pode criar os seus também, claro).

Escolhi icones de redes sociais:

Ícones escolhidos das redes sociais

Bem, vamos trabalhar com uma imagem em sua forma “natural” e também um efeito “hover” da mesma. Sugiro que os ícones tenham uma singularidade em seus tamanhos (altura e largura) para que o CSS Sprite fique mais prático e preciso. Faça uma soma da altura de cada imagem e crie um novo arquivo com o resultado desta soma. Como assim? Só a altura? Sim.

Previna-se de dores de cabeça, existem diversas formas de aplicar CSS Sprite, tanto usando os eixos horizontal e vertical, ou apenas um deles. Vamos praticar apenas no eixo vertical.

Escolhi 4 ícones de largura 32px e altura 32px, o que dá um total de 128px de altura, entretanto faremos o efeito hover (quando passar o mouse), duplicamos por 2 e chegamos a um arquivo com 256px de altura. Sendo assim vamos criar um novo arquivo de imagem com 32px de largura e 256px de altura.

Nova Imagem Criada

Cole as imagens uma abaixo da outra, preservando a altura de cada ícone (neste caso, 32px) e duplicando os ícones. Isso facilitará sua vida quando começar a escrever o CSS, quando chegar lá saberá o motivo.

Você pode recorrer ao uso de guias para não se perder:

Utilizando Guias

Com todas as imagens juntas, crie o efeito hover que achar melhor.

Ícones com estado Hover

Salve sua imagem no formato desejado.
Observação: em breve farei um tutorial para otimização de imagens.

Escrevendo o HTML

Faremos o HTML normalmente, também utilizarei listas não-ordenadas, não apenas para facilitar os estudos mas porque é muito recomendável para menus e áreas de navegação. Crie uma lista não ordenada:

<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Youtube</a></li>
</ul>

Crie classes para posterior edição do seu CSS, com a nomenclatura de sua preferencia.

<ul class="sprite">
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
<li><a href="#" class="youtube">Youtube</a></li>
</ul>

Utilize nomenclaturas genéricas, para que possa reaproveitar o código em outros sites que venha a fazer.

Escrevendo o CSS

Já escolhi várias imagens, inseri em um único arquivo, uma em cima da outra… como assim, faz o que com isso!? O CSS Sprite consiste em utilizar o atributo css background-position para determinar a partir de qual pixel a imagem será exibida. Primeiro, o código completo:

.sprite {
margin:0;
padding:0;
overflow:hidden;
}
.sprite li {
float:left;
margin-right:10px;
list-style:none;
}
.sprite li a {
background-image:url(img-sprite.png);
background-repeat:no-repeat;
display:block;
width:32px;
height:32px;
text-indent:-9999px;
}
.sprite li a.twitter {background-position:0 0;}
.sprite li a:hover.twitter {background-position:0 -32px;}
.sprite li a.facebook {background-position:0 -64px;}
.sprite li a:hover.facebook {background-position:0 -96px;}
.sprite li a.flickr {background-position:0 -128px;}
.sprite li a:hover.flickr {background-position:0 -160px;}
.sprite li a.youtube {background-position:0 -192px;}
.sprite li a:hover.youtube {background-position:0 -224px;}

Explicação:

.sprite – Class da tag UL, retirei apenas a margem e espaçamento
.sprite li – Flutuando a esquerda para que os ícones fiquem um ao lado do outro
.sprite li a – Define a altura, largura e o arquivo único de imagem que será utilizado como plano de fundo
.sprite li a.twitter – Aqui eu defino a posição da imagem em cada link do item da lista (<li><a>), específico a class criada.

Lembra quando disse que trabalhar com imagens padronizadas em altura e largura facilitaria tudo? Observe que escrevi o CSS seguindo a mesma ordem do html e da composição da imagem para o sprite. Se todas as imagens possuem a mesma altura, basta eu subtrair o valor da altura para obter a posição do próximo item da lista: 0, -32px, -64px, -96px, -128px, etc.

Bem pessoal, agora é só testar no seu navegador. Se quiser ver o código pronto, baixe o exemplo zipado. Se já observaram, o novo layout deste blog utiliza diversos sprites, o ideal é usar apenas um, mas como o blog passa por mudanças constantes, separei de acordo com a minha necessidade. Para visualizar os sprites deste site basta clicar com o botão direito e selecionar Exibir imagem de fundo (no Firefox).

Se você é web designer, provavelmente já se deparou com um pequeno obstáculo: “como utilizar fontes personalizadas no meu layout, se é necessário que o usuário tenha instalado a fonte em seu computador para visualizá-la?”. Provavelmente 70% dos usuários que fazem esta pergunta acabam aderindo a utilizar imagens para substituir o texto com uma fonte que não é padrão em um computador.

Entretanto esse já não é mais um problema para os desenvolvedores, com a grande necessidade de aplicar novas fontes na web, já foram desenvolvidas várias técnicas para personalizar as fontes, através de flash, script ou css. Este tutorial irá lhe ensinar a incorporar uma fonte através de CSS, a partir da regra chamada @font-face.

A regra @font-face permite que você envie qualquer fonte para o servidor, onde deverá indicar onde ela se encontra. É um processo similar ao de inserir uma imagem de plano de fundo. Sem mais delongas, vamos ao que interessa, veja a seguir como aplicar a @font-face.

@font-face {
font-family: nome-da-fonte;
src: url(diretorio/nome-da-fonte.ttf);
}

Observe que foi utilizado a propriedade comum de fontes (font-family) e foi adicionada a propriedade “src”, na qual é indicada a localização da fonte. Deu para perceber que é o mesmo de uma imagem de plano de fundo? Confira:

div {
background-image: url(imagens/plano-de-fundo.jpg);
}

@font-face {
font-family: Sears Tower;
src: url(fontes/Sears Tower.tiff);
}

Você irá utilizar o nome original da fonte tanto na propriedade “src” quanto na propriedade “font-family”. Agora sua fonte já foi incorporada, mas ela ainda não vai ser exibida, afinal você não disse quais tags ou áreas do seu layout devem utilizar essa fonte. Suponhamos que queremos utilizar a nova fonte para todas as tags de título:

h1, h2, h3, h4, h5, h6 {
font-family: Sears Tower, Arial, Verdana, Helvetica, Sans-Serif;
}

Estaria tudo pronto, se não fosse pelo lindo, maravilhoso, espetacular, inigualável… INTERNET EXPLORER. É meus amigos, o vilão não deixa os desenvolvedores em paz. O Internet Explorer suporta apenas as fontes no formato EOT. A solução é simples, converta a fonte para o formato EOT através do site Online Font Converter. Após converter, conclua o CSS inserindo os novos valores:

@font-face {
font-family: ‘Sears Tower’;
src: url('Sears Tower.eot');
src: local('Sears Tower.ttf'), url(‘Sears Tower.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 {
font-family: Sears Tower, Arial, Verdana, Helvetica, Sans-Serif;
}

Lembrando que fiz o exemplo como se estivesse inserindo a fonte chamada Sears Tower, mas você deve utilizar o nome da fonte que está querendo incorporar.

É isso, agora não há mais preocupação em conseguir personalizar uma fonte no seu site, preocupado em todos os navegadores conseguirem interpretar. Mesmo assim, tenha calma, assim como qualquer arquivo incorporado, ele tem o seu tamanho próprio. Sendo assim, inserir fontes abusivamente pode causar perda de performance, pois a cada novo arquivo, maior o tempo de carregamento dos mesmos.

As folhas de estilo são fundamentais para controlar a aparência de nossas páginas HTML. Hoje iremos aprender sobre a propriedade Background, responsável pela formatação dos planos de fundo das páginas e elementos.

O background possui as seguintes propriedades:

• background-color: Cor do plano de fundo;
• background-image: Imagem de plano de fundo;
• background-repeat: Define se a imagem deverá se repetir ou não;
• background-attachment: Define se a imagem irá ficar fixa ou rolar junto com a página;
• background-position: define a posição da imagem de plano de fundo (esta propriedade é fundamental para o uso de CSS Sprite);

background-color

Os valores para a propriedade background-color são:
Hexadecimal: #FFFFFF
Código RGB: rgb(250,250,250)
Nome da cor (em inglês): red, blue, green
Transparente: transparent

Tanto o valor hexadecimal quanto o código RGB podem ser colhidos dentro de um programa gráfico, como o photoshop.

background-image

A sintaxe para inserir uma imagem como plano de fundo é: url(pastadaimagem/imagem.gif). Lembre de observar bem o nome da pasta na qual inseriu sua imagem, um único caractere digitado errado e seu plano de fundo não será exibido.

background-repeat

Esta propriedade é utilizada apenas se você fizer uso de uma imagem como plano de fundo. As possibilidades são:

não repetir: no-repeat;
repetir em todos os eixos (horizontal e vertical): repeat;
repeater horizontalmente: repeat-x;
repeater verticalmente: repeat-y;

background-attachment

Para fixar a imagem na tela (efeito marca d’água): fixed;
Para rolar a imagem junto com a página: scroll;

background-position

Esta propriedade é crucial para trabalhar com CSS Sprite (técnica utilizada para otimização de performance dos sites, juntando vários planos de fundo em um arquivo único.

É importante que compreenda que esta propriedade recebe 2 valores, sendo eles referentes aos eixos x e y, respectivamente.

por porcentagem: 50% 50%;
por pixel: 30px 20px; (isso quer dizer que a imagem ficará a 30 pixels de distância do início do eixo x e 20 pixels de distância do eixo y. Estes valores também podem ser negativos (Ex: 10px -45px;). Explicações mais detalhadas em breve.

Para definir alinhamento ao topo, direita, baixo, esquerda e centro basta que utilize sua especificações em inglês (top, right, bottom, left, center). Veja os exemplos abaixo:

background-position: top left; /* alinha a imagem de plano de fundo no topo e na esquerda) */
background-position: bottom right; /* alinha a direita e para baixo */
background-position: center center; /* alinha todo o plano de fundo ao centro */

Otimizando o código CSS

Assim como diversas propriedades das folhas de estilo, é possível resumir todas as informações aqui estudadas em uma única propriedade. Veja o exemplo abaixo:

background: #00FF00 url("images/nome-da-imagem.gif") no-repeat fixed 200px 70px;

Atenção: existem valores que se não forem inseridos o plano de fundo continuará funcionando e os mesmos receberão valores ocultos padrões. É o caso do background-attachment (padrão scroll), background-position (padrão 0 0) e background-repeat (padrão repeat).

Todos já devem saber o quanto é fácil ter um blog, seja com domínio próprio ou não. Diversas ferramentas são criadas e disponibilizadas gratuitamente na internet todos os dias. Dentre estas ferramentas as mais conhecidas são os Sistemas de Gerenciamento de Conteúdo.

Mas não basta apenas criar seu blog, a criação de um layout singular ajuda a destaca-lo perante os demais.

Observação: esse tutorial usa o Wordpress como exemplo, entretanto a maior parte das dicas usadas aqui servem para personalização de templates de outras ferramentas como Joomla e Drupal.

Para customizar temas no Wordpress é necessário:

• Noções básicas de HTML
• Noções básicas de CSS
• Noções básicas em algum programa gráfico (Photoshop, Fireworks, Illustrator, etc)

Índice do Tutorial

• Download do template
• Inserindo imagem no Template
• Editando arquivos HTML e CSS
• Resultado

Download do Template

No site oficial do Wordpress você encontra centenas de temas gratuitos para baixar, acesse http://wordpress.org/extend/themes/ . Você deve clicar em download no tema escolhido. Após concluir acesse o ftp de seu site e envie para a pasta themes, dentro de wp-content.

Para esse tutorial eu escolhi o tema jQ.

Template Wordpress jQ

Agora ative seu tema no menu Appearance > Themes (Aparência > Temas) do administrador.

Ative o tema Wordpress no administrador

Inserindo imagem no Template

Muitos dos temas possuem uma boa área no seu topo para ser explorada. Com alguns conhecimentos gráficos, seja no Photoshop, Fireworks ou Illustrator você pode criar uma arte para usar no blog. Veja a imagem criada para este tutorial (assunto: os bizarros):

Arte Gráfica para inserir no topo do tema

Editando arquivos HTML e CSS

No wordpress o arquivo responsável pelo topo do blog é o header.php. Para fazer minha personalização apenas substitui o título do blog pela imagem criada. Veja:

Inserindo a imagem do topo (arquivo header.php)

Agora é a vez de mudar a cor do plano de fundo e dos links, para isso é necessário editar a folha de estilos (CSS). Caso não saiba do que se trata, recomendo estudar o básico pelo site do Maujor.

Para mudar as cores no seu arquivo CSS basta saber o código RGB dela. Para isso você precisará do auxílio de uma paleta de cores. Para quem não trabalha com programas gráficos recomendo o site Color Blender para encontrar o valor RGB da cor que deseja.

Veja como formatar as cores via CSS:
color:#RRGGBB; (para cor do texto)
background-color:#RRGGBB; (para cor do plano de fundo)

Para essa customização alterei o plano de fundo para a cor azul marinho escuro (background:#040116;) e a cor dos links para um tom de vermelho (color:#aa182b;). Veja:

Alterando o CSS do template (arquivo style.css)

Dica: se quiser alterar um plano de fundo já existente no seu template sem precisar editar o HTML ou CSS, basta salvar sua nova imagem com o mesmo nome e extensão (jpg, gif ou png) da imagem original e substitui-la.

Resultado

Veja abaixo a comparação do template original e do resultado:

Antes

Resultado da customização do template

Esse tutorial é de nível básico e envolve os elementos mais simples de um template. É um ótimo caminho para começar a desvendar a estrutura de outros templates até que possa se sentir confiante para criar o seu.

Esse post foi elaborado especialmente para Netto Silva e Italo Veloso, que fizeram o pedido através do RGB Magazine. Caso também queira fazer o seu pedido sobre algum tutorial clique aqui. O post ficou um pouco extenso, se tiver dúvidas envie seu comentário.

Desenvolver um site totalmente compatível com todos os navegadores (Internet Explorer 6 e 7, Firefox, Google Chrome, entre outros) não é uma tarefa tão simples, quando nos referimos a CSS. Isso ocorre pela despadronização de leitura do site feita por cada navegador. A grande dor de cabeça é gerada pelo Internet Explorer 6, que é recheado de “bugs” principalmente para sites em tableless.

Firebug

Printscreen Firebug

Com este plugin do firefox e possível editar o html e css diretamente pelo navegador sem a necessidade de ficar indo e voltando para o dreamweaver (ou outro programa que utilize para editar seus códigos). Além disso, o Firebug permite descobrir o motivo pelo qual uma div está mal posicionada, etc.

Após instalar e ativar seu plugin ele estará disponível na parte direita inferior do firefox.

Download Firebug

Web Developer

Printscreen Web Developer

Mais um add-on do firefox. O Web Developer permite verificar diversos erros e formatações de uma página web. Em destaque eu indicaria o redimensionamento do tamanho da janela do navegador e a verificação de erros no CSS.

Download Web Developer

IETester: teste seu site no Internet Explorer

Printscreen IETester

Este programa permite que você visualize seu site em várias versões do Internet Explorer (6, 7 e 8). Instale o IETester e em seguida instale a versão mais recente do Internet Explorer no seu computador. Você poderá abrir diversas abas, sendo uma com cada versão. Isso é importante para ter certeza de que a codificação (html e css) são compatíveis com todas as versões.

Download IETester

Vale ressaltar que o Internet Explorer 6 está sumindo aos poucos. Dependendo do nicho do seu site ou blog será útil ou não deixá-lo compatível com o mesmo. Sites que tem como conteúdo o desenvolvimento web não há necessidade de tal compatibilidade, devido ao fato de que o público alvo provavelmente usa navegadores atualizados.

Os plugins e programas citados nesse post já existem há um bom tempo e mesmo assim continuam sendo usados por diversos desenvolvedores e designers em todo o mundo. Aproveite e faça o download.

Para quem ainda não conhece propriedades css básicas pode aproveitar a grande ferramenta oferecida pelo site CSS Type Set. A operação é muito simples, existem dois campos (lado esquerdo e direito), no esquerdo pode digitar um texto qualquer, na parte superior poderá controlar os estilos deste texto atribuindo cores, tamanhos, etc. A medida que formatar o texto no campo esquerdo automaticamente será exibido o código css no campo direito que faz a formatação do texto.

CSS Type Set

Sendo assim basta copiar o código gerado e colar em sua folha de estilos. É bom enfatizar que é uma ferramenta excelente para quem está iniciando, mas lembre-se de que é fundamental que aprenda todas estas propriedades e valores, pois as mesmas estarão com você sempre que precisar desenvolver algo novo, além de que quanto mais souber melhor ficará e mais habilidoso também.

A utilização de imagens .png transparentes é uma dúvida que persiste principalmente para quem está começando a estudar css e enfrentando os desafios do Internet Explorer 6. Pensando nisso resolvi trazer um tutorial simples e prático sobre como concertar este pequeno “bug” do IE6.

O processo para corrigir este problema é facil. Será necessário o download de dois arquivos (iepngfix.htc e blank.gif), o arquivo .htc faz o serviço e a imagem blank.gif é responsavel por trazer a transparência.

Faça o download dos arquivos aqui (.rar – 1,66kb)

Para aplicar no seu site primeiramente copie e cole os arquivos (iepngfix e blank) na pasta raíz do seu site. Depois abra a folha de estilos e crie uma “class” para aplicar o arquivo .htc. Siga o exemplo:

.nomedaclasse {behavior:url(iepngfix.htc);}

Para finalizar, quando você inserir a imagem insira a “class” criada. Exemplo abaixo:

<img src=”nomedaimagem.png” class=”nomedaclasse” />

Pronto, a “mágica” está feita. Vale lembrar que a utilização da extensão .png para imagens na web é totalmente opcional.

Seja um iniciante ou um profissional, os estudos contínuos na área de desenvolvimento web são fundamentais para manter-se atualizado das novas tendências além de melhorar a qualidade do trabalho desempenhado.

No início de uma carreira de Web Designer as primeiras preocupações serão evidentes, principalmente em relação a desenvolver um layout bonito e que agrade os clientes. Após o layout a segunda parte do processo é transformar o arquivo de imagem do layout para a linguagem web, ou seja, o bom e velho html. Por último, dependendo da necessidade, tornar o site dinâmico, neste caso apenas alguns web designers se arriscam em programar, pois é uma área distinta e que não é obrigatória para indicar a qualidade de um designer. Geralmente os designers trabalham em parcerias com programadores e vice-versa.

Com um certo período de experiência o web designer começa a ser mais visto no mercado de trabalho e seu nome ganha mais espaço. Eis que surgem novos desafios. Criar um layout, fazer o html e deixá-lo dinâmico pode não ser tudo.

Etapas básicas:

1. Criar o layout em um programa gráfico (photoshop, fireworks ou outro de acordo com a preferência);
2. Fazer o html do layout desenvolvido;
3. Programar o site (geralmente terceirizado com um profissional da área).

Durante o desenvolvimento destas etapas, principalmente das duas últimas (html e programação) existem diversos pontos importantes a serem aplicados, veja a seguir.

Estudos e Técnicas importantes:

1. Desenvolvimento do html através de CSS (forma de desenvolvimento conhecida como tableless)

Por muitos anos foi utilizado na internet o padrão de html feito em tabelas, uma linguagem que já está fora dos padrões atuais. O html que utiliza a técnica Tableless torna o site mais acessível e leve.

2. Validação do site pelos padrões W3C

Embora ainda exista uma resistência de alguns desenvolvedores, ter um site validado pelos padrões W3C é importante para manter um padrão de alta qualidade. Um grande desafio para o desenvolvimento de alguns sites é a utilização de hacks para o Internet Explorer 6, pois muitos destes hacks não são aceitos pelo W3C.

3. Técnicas de Otimização para motores de busca (SEO – um dos pontos chaves de estudo web)

Este é um dos pontos mais importantes a serem considerados caso o site desenvolvido tenha como principal público alvo visitantes via motores de busca (Google, Yahoo, Msn, entre outros).

Veja abaixo alguns links úteis.

Desenvolvimento em Tableless (CSS)

• Site sobre CSS e Web Standards: www.maujor.com

Validação do seu site pelo W3C

• Xhtml: http://validator.w3.org/
• CSS: http://jigsaw.w3.org/css-validator/

SEO – Search Engine Optimization

• O que é SEO (estudos iniciais): http://www.rgbmagazine.com.br/desenvolvimento-web/iniciando-estudos-sobre-otimizacao-para-motores-de-busca-seo/
• Analise o SEO Score do seu site: http://whois.domaintools.com/
• Dicas e explicações sobre SEO: www.mestreseo.com.br

Todos os tópicos citados nesse post receberão atenção especial. Vale lembrar que os estudos devem ser feitos sem pressa, pois toda informação é importante, por menor que seja. Fique atento as novas postagens, se quiser um tutorial específico basta enviar uma mensagem através do link http://www.rgbmagazine.com.br/pedidos/