Tutorial Mapas de imagens baseado em CSS

Mapas de imagens foram muito usados no auge do Flash. Sua utilidade ainda se encontra em templates criativos, pois eles nos ajudam a ampliar o visual e a interatividade do usuário com o Blog ou WebSite.
Este tutorial se propõe a ensinar a criar um mapa de imagens baseado em CSS. Faremos um exemplo simples, mas que pode ser expandido para versões mais complexa, dependendo da criatividade de cada um.
OBS: Mapas de imagens ainda continua sendo uma parte válida da HTML/XHTML, por misturar conteúdo e apresentação.

Para este exemplo criei uma imagem simples de um Header com três itens de menus, mas você pode usar fotos, etc.


A primeira coisa que fazemos é adicionar a imagem à página, dentro de um div nomeado

<div id=”mapa”>
<img src=”imagem/headerexemplo.gif” width=”370” height=”150” alt=”Teste de mapas de imagens” />
</div>

Em seguida adicione uma lista de links ao site ou blog de cada item do menu.
Cada item do menu precisa estar dentro de uma classe para podemos indentificar sua posição no CSS.

<div id=”mapa”>
<img src=”imagem/headerexemplo.gif” width=”370” height=”150” alt=”Teste de mapas de imagens” />

<ul>
<li class=”home”>
<a href=”home.html” title=”home”>Home</a>
</li>
<li class=”somos”>
<a href=”somos.html” title=”Quem Somos”>Quem Somos</a>
</li>
<li class=”contato”>
<a href=”contato.html” title=”Contato”>Contato</a>
</li>
</ul>
</div>

Vamos agora para o CSS e suas propriedades:
Configure a largura e altura do div de modo que correspondem com as dimensões da imagem. Depois configure a propriedade position como relative. Aqui está o segredo desta técnica.


#mapa {
width: 370px;
height: 150px;
position: relative;
}

Os marcadores da lista de links não pode aparecer, portanto, remova-os configurando a propriedade list-style como none. Para completar zere margin e padding da lista:

#mapa ul {
margin: 0;
padding: 0;
list-style: none;
}

Agora precisamos estilizar os links, posicionando os links de âncora absolutamente. Também precisamos configurar a largura e altura deles para criarmos uma área clicável.
Os links ainda continuam a ser exibidos, então damos um grande recuo de texto para oculta-los.

#mapa a {
position: absolute;
width: 100px;
height: 50 px;
text-indent: -1000px;
}

Os links individuais agora podem ser posicionados:

#mapa .home a {
top: 4px;
left: 8px;
}

#mapa .somos a {
top: 4px;
left: 117px;
}

#mapa .contato a {
top: 4px;
left: 237px;
}

As posicões das imagens são conseguidas através do editor que você usa. Crie as imagens e clique nelas e veja nas propriedades as posições X e Y e coloque na CSS.
Está é uma técnica básica que pode ser evoluída, com criatividade, para algo muito mais complexo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Blogs que se destacam da "Frota de Táxi" parte II

Parece que o mundo Blogspot está começando a andar de mãos dadas com a arte. Esta semana encontramos mais 5 Blogs que se destacaram da Blogsfera em relação ao Layout/Template.
Analisamos apenas o Template/Visual. Não usamos critério de conteúdo, apesar de todos terem conteúdo de qualidade.
Então vamos aos Blogger/Blogspot desta semana:

• O Mundo de Stuart
  O dono deste Blogspot ousou no estilo do Blog. Além de ter sido muito criativo, ele teve a coragem de deixar todo o conteúdo em apenas uma coluna, o que tornou seu template totalmente diferenciado.
  Para quem gosta de ilustração e desenhos (como eu) vale dar uma conferida.




• Oscar Luiz
  Ousadia seria o termo correto para descrever este Blog. Em comentário, no CSS Padrões, o próprio Oscar me disse que acharam que ele fosse meio "Viadinho" pelo estilo do Template, mas eu digo que ele foi muito Macho por ter feito um Template tão criativo e que passa a mensagem correta do propósito do Blog.




• Crônicas do Nasch
  Estilo Clean, mas totalmente diferenciado pela Header e itens das suas Sidebar, Crônicas do Nasch merece estar nesta lista.
  O Blog precisa de mais estilização e o próprio dono me disse que está providenciando isso.




• Incêndio Acidental
  Cores forte e vibrantes. Quando você entra no Blog, realmente parece estar entrando em um “Incêndio”. O dono do Blog conseguiu passsar a mensagem no seu Template, que está realmente lindo!




• Piratas do Protásio
  Belo Template. Apenas uma coluna e um rodapé com 3 divisões. Simples? Não, eu diria muito criativo.
  Diferentes eles já são (Motoqueiros) e contribuíram com a Blogsfera, trazendo está difença para nossa apreciação.

Como já comentamos, está é uma avaliação da CSS Padrões (Nossa Opinião apenas).
Parabéns aos Blogs desta semana e continuem usando criatividade, ousadia e coragem.
Abraços!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Qual template serve para meu Blog ou Site?

Está questão tem gerado discussões interessantes. Quando sou solicitado para executar um trabalho de Designer de Sites a primeira pergunta que faço para meu cliente é: “O site ou blog, fala do quê?”. A partir da resposta já começo a criar idéias, a imaginar objetos que possam passar para audiência o propósito do site.
Mas isso pode ser uma tarefa difícil para quem não está habituado com designer, tipografia e paleta de cores.
Tentarei aqui, passar algumas diretrizes para que você possa reconhecer como seu layout deve ser. Analisarei 2 categorias por hoje. Veja bem, isso não são regras rígidas, são apenas sugestões.

• 1. Blog sobre dicas, truques, macetes, códigos para web.
Este tipo de site ou webBlog deve ter uma aparência clean. Geralmente este tipo de Blog informa, sobre tutoriais e apostilas sobre um determinado assunto, que requer leitura concentrada. Imagine aprender a criar um código em um template bagunçado?
A tipografia deve ser bem estudada para não cansar sua audiência. Entre as mais usadas para este tipo de Blog são: Verdana, Arial e Geórgia.
As cores devem ser usadas com cautela. O recomendado seria trabalhar com 2 paletas de cores. Com 2 paletas de cores pode-se chegar a aplicar umas 30 cores diferentes.
Caso tenha dificuldade com cores, sugiro olhar a natureza. Na natureza todas cores se combinam e você pode tirar vantagem disso.


• 2. Blog sobre piadas, entreterimento, cinema.
Este tipo de blog deve ter uma aparência impressionista. Cores fortes, fontes diferentes, imagens bem trabalhadas, fundo que à primeira vista faça você querer voltar.
Para encontrar inspiração para este tipo de Blog eu sugiro que você olhe sua bagunça. Bagunça? Sim, na bagunça se encontra muita organização interessante.
Imagine seu blog em um papel velho, em um tecido diferente, em um saco de pão. Use sua imaginação.
Faça colagem de figuras e separe aonde vai o artigo e aonde vai a barra lateral. Crie o blog no papel.
Cartões de fim de ano. Já reparou na textura do papel, nas cores, fontes, desenhos?
Às vezes nossas loucuras visuais podem se transformar em websites de se perder o fôlego.

Então, agora é você se arriscar e tentar fazer seu blog ficar mais estiloso

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Blogspots que se diferenciam da "Frota de Táxi"

Estou lançando este tema "Frota de Táxi" para destacar os blogs blogspot que estão tentando se diferenciar deste estilo massificante que invadiu a Blogsfera.
Quem visita muitos blogs já notou que todos são iguais no Layout.
Ás vezes o que muda é somente a cor de fundo e os headers.
Vamos ver alguns blogs, que para minha opinião, estão se diferenciando e criando um Layout mais atrativo e diferenciado.

• Crônicas Mal Passadas: Estilo de cores ousados com texto em fonte bem trabalhas.
  O header se diferencia pela clareza e padrão de cores.
  A sidebar ousada com uma do lado esquerdo estreita e logo a seguir a segundo com largura maior.
  Os post colocados, totalmente a direita, dá ao blog todo um charme.
  Layout pode ser mais personalizado, mas tenho certeza que sua Autora está providenciando isso.


• GD: Quem achava que Blogger/Blogspot são apenas templates com duas sidebar a direita ou a esquerda vai rever seus conceitos.
  Este exemplo de blog que nos faz (WebDesigner) termos orgulho de nosso trabalho.
  Ousado, criativo, diferente, cativante, fico até sem palavras para descreve-lo então confiram vocês mesmos.


• Blog do Amuki: Um blog tem que ter a cara do dono. Esse não foge a regra.
  Uma referência para inspiração de aventureiros no mundo do WebDesigner e dos prifissionais também.


• Agenda Criativa: Quem disse que nos negócios temos que ser tão rígidos?
  Este Layout em um Blogspot nos mostra que podemos ser muitos criativos e ao mesmo tempo sérios.
  Ainda no Brasil há o movimento que o blog tem que ocupar a tela toda. O pessoal se esquece que hoje sites e blogs são vistos em tv lcd de 52", e que sites 100% é coisa do passado.


• Política com Pimenta: Não podia deixar de fora o jornalista Luíz Valério, que em uma ousada atitude, providênciou um layout totalmente diferenciado da "Frota de Táxi" da Blogsfera Brasileira.
  Mas coragem, ousadia e risco fazem parte do perfil de um jornalista, e ele as usou com sabedoria.

Esta semana fico com estes 5 Blogger/Blogspot que estão se diferenciando dos demais.
Esta pesquisa foi elaborada com mais de 200 blogs no Brasil e como podem ver 1% (na minha opinião e do grupo que usei para pesquisa) se destacaram.
Blogger/Blogspot pode e deve ser bonito e com conteúdo de qualidade.

Até a próxima


Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Tutorial simples para Títulos Profissionais

Aqui está um tutorial simples de como colocar qualquer tipo de fonte em seus títulos no blogger ou em seus sites.
Como foi escrito em artigo anterior, você precisará de mexer no Flash, CSS e JavaScript.
Baixe os arquivos no formato Flash, JavaScript e os CSS necessários clicando aqui.
Faça primeiro localmente no seu computador, quando estiver craque aplique no seu site ou Blog.

1. Primeiro Passo:
Abra o arquivo Flash no formato .fla, clique duas vezes no quadro branco que aparecerá e não edite nenhuma palavra.
O que você pode modificar neste arquivo é:

• Tipo de Fonte


• Negrito e Italico

Após escolher a fonte exporte o arquivo .fla em formato filme Flash 6. Salve com o nome de sua fonte. Ex: Tahoma.swf
Guarde este arquivo em uma pasta junto com os outros.

2. Passo:
A CSS do arquivo
Coloque depois desta marcação no seu blog.

]]></b:skin>

<style media='screen' type='text/css'>

.sIFR-hasFlash .post h3 {
visibility: hidden;
font-size: 24px;
}


.sIFR-flash {
visibility: visible !important;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

</style>
<style media='print' type='text/css'>

.sIFR-flash, object, embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>

<script src='http://servidorweb/sifr.js' type='text/javascript'/>
</head>

Esta CSS tem que estar do jeito que está aqui, salvo alterações para sua implementação, no caso eu estilizei o .post h3 que é os títulos dos posts.
As primeiras declarações configura a posição e outras configurações visuais dos títulos.
O segundo CSS faz com que a troca seja efetuada corretamente e faz com que se sua página for impressa, a impressão do título saia normal.

3. Passo
O JavaScript faz a magia acontecer. Cole este trecho antes da tab </body>.
O arquivo JavaScript passa os valores para CSS através de variáveis.
Existem duas maneiras de fazer isso:

a - Através de variáveis por ordem no arquivo JavaScript (mais difícil e complicado)

b - Através dos nomes das váriaveis como mostrado abaixo.

SFlashSrc: endereço que esta o arquivo Flash filme.
sColor: cor da fonte
SHoverColor: a:hover (estado do link quando o mouse está sobre)
sFlashVars: variáveis passadas para o filme flash (textalign, swMode (transparencia do filme para background com detalhes)

<script type='text/javascript'>

if(typeof sIFR == "function"){


sIFR.replaceElement(".post h3", named({sFlashSrc: "http://servidorweb.com/verona.swf", sColor: "#800517", sHoverColor: "#123974", sFlashVars: "textalign=center", sWmode: "transparent"}));

};
//]]>
</script>

Se quiser estilizar outros itens é só ascrescentar uma linha a partir do sIFR.replaceElement e apontar para uma classe, id ou elemento específico.
Para cada fonte criar um filme com o nome da fonte.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Estilização profissional dos Títulos

Título são muito importantes, por isso uma letra com estilo, sempre são melhores do que usar fontes padrões da Web, mas como vimos em Artigo anterior, você não pode trabalhar com qualquer fonte na web, porque você dependerá de que, a fonte esteja instalada no micro do usuário do outro lado (Coisa que nunca acontece).
Como resolver está questão?
A CSS Padrões resolveu está questão e você pode confirmar pelos títulos dos post.
Veja que foi colocada uma fonte nada tradicional. E como foi feito isso se os títulos de Blogs estão sendo mostrados dinamicamente?
A princípio alguns chegam a pensar que foram usadas imagens e algum código CSS de substituição, mas não foi.
O processo todo está sendo realizado através de três tecnologias em conjunto.

• Um arquivo Flash para as Fontes (Flash6).


• Declaração CSS.


• JavaScript

Com está três tecnologia é possível colocar qualquer (literalmente), qualquer tipo de fonte não importando o formato, tamanho, família, entre outras coisas.
Para implantar está técnica em seus sites ou blogs eu teria que criar um artigo que levaria quase 10 partes para que fosse de compreensão fácil, mas realmente como estou envolvido em vários projetos urgentes vou deixar o link de onde descobri a técnica e espero que façam bom proveito.

Link para o Artigo original Artigo do Replace de Títulos

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

Veja em primeiro mão um Template Novo e Diferente

Mais um projeto da CSS Padrões está quase sendo finalizado.
Visite Blog Masserato e dê sua opinião.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Fontes de texto usadas pelo WebDesigner Webs e Gráficos

Trabalhar com fonte de texto na Internet não uma coisa muito fácil.
Temos o grande obstáculo de que, se a fonte não estiver instalada no computador do usuário, ela será substituída por uma fonte padrão como Arial, ou Time New Roman que na verdade tira todo o encanto do projeto executado.
Como CSS (folhas de estilos) faz parte do mundo do Design Web vou mostrar as 7 fontes mais usadas por Designer Web e Designer Gráficos.

1.Helvetica
Sem sombra de dúvida, a Helvetica é a mais utilizada pelos profissionais (e também pelo não profissionais) em design gráfico. Apesar de algumas críticas pelo tipo de letra, muitos acreditam que ele está muito bem espaçada.


2.Trajano
Trajano encontra o seu caminho em muitos cartazes do cinema hollywoodiano e nada remotamente a ver com religião, direito, casamento, a classe ou o passado.


3.Garamond
Embora existam muitas versões da Garamond, a mais usada hoje é a versão do Adobe Garamond (como visto abaixo) lançada em 1989. Garamond é uma grande fonte de revistas, livros, sites e órgãos de textos longos e recentemente foi nomeado a segunda melhor fonte (após Helvetica) por um alemão (que não me lembro o nome agora).


4.Futura
Futura é uma fonte que surge muitas vezes em grandes ecrãs, logótipos, grafismos em pequenos livros. Ela é baseada em formas geométricas (perfeitos círculos, triângulos e quadrados), que se tornou representante do estilo Bauhaus design de 1919-1933. Futura tem uma aparência de eficiência e presteza. Alguns odeiam a fonte.


5.Bodoni
Bodoni é uma grande fonte de manchetes, texto decorativos e logotipos. Bodoni tem uma estrutura subjacente estreita plana, sem colchetes serifs. A cara tem extremo contraste entre grossos e finos acidentes vasculares cerebrais, e uma construção geométrica global, o que o torna uma fonte com olhar muito estético.


6.Bickham Script Pro
Utilizada principalmente para ocasiões formais, Bickham Script Pro é uma fonte que faz um bom trabalho.


7.Frutiger
A fonte Frutiger família não é nem estritamente geométrica nem humanista em construção, as formas são concebidas de modo a que cada carcteres seja facilmente reconhecidos. Essa distinção faz com que seja bom para sinalização e visualização trabalho e, muitas vezes, é utilizado em Web 2.0 Logos.


Aqui estão algumas outras fontes muitos "profissionais" que designers utilizam-se frequentemente; Gills Sans, FF DIN, Franklin Gothic, Bembo, Rockwell, Avenir, Avant Garde, MrsEaves, Gotham, Sabon, Warnock Pro. Observe que nenhuma dessas fontes são oferecidas para dowloads de graça.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Personalização X Funcionalidade. Como diferenciar?

A CSS Padrões é dedicada totalmente a Layout visuais de Blogs, websites, e-commerce e newsletters, porém na grande blogsfera ainda há uma confusão relacionada entre personalização de layouts X funcionalidade de layout.
Existe uma diferença grintante entre criar um layout e dar funcionalidade a um layout.
Um exemplo de provedores de funcionalidades para Blogs pode ser encontrado no Usuário Compulsivo, Templates para Novo Blogger, Templates para Você entre outros.

• Funcionalidade:

Quando você, por exemplo, coloca um Widget de Postagens Recentes através de um link de Feeds, isso na realidade é uma funcionalidade.
Itens Relacionados, Comentários Recentes, Linkaram-me, Leia Mais, entre outros, tudo isso é funcionalidade e não tem muito haver com personalização de layout.
Funcionalidade cria um item, ou uma função dentro do seu blog, website ou e-commerce que fará algo específico em relação a informação que você quer passar.

• Personalização:

A Personalização de um Template já é algo um pouco mais distinto.
Na personalização é preciso fazer um estudo do nicho de mercado que o blog atua, estudo de cores, organização da informação, onde cada item vai aparecer, onde daremos destaque, como serão os títulos (em relação ao visual), quantas colunas vai ter, etc.
Por exemplo em seu recente artigo, a Ariane ensinou a dividir um post em duas colunas. Isso é personalização.
O Compulsivo criou o widget Dica com busca auto limpante. Isso é funcionalidade.
Personalização no meu ponto de vista, é algo mais difícil de se fazer do que criar uma funcionalidade (Não estou dizendo que é fácil). A personalização exige que você viaje na maionese (Imaginação). Você tem que conseguir enxergar o que a maioria das pessoas não enxergam. Ver em sua cabeça o Layout pronto e reproduzir isso no computador com editores gráficos.
Na personalização você terá que pegar todas funcionalidades e transformar em algo atraente, diferente, belo, agradável. Personalização faz seu blog ser diferente e exclusivo.
Quando eu navego na Blogosfera Brasileira, o que vejo é o mesmo Template em mais de 100 blogs. Alguns mudam as cores, outros as fontes, mas nada os difere realmente.
Por exemplo em uma semana recebi 5 e-mails: “Olhe meu novo Template”.
Quando fui ver era o template do Dicas Blogger. Igualzinho. Dos 5 que olhei 3 eram iguais.
Pior ainda, que dos 5 blog, 4 não estavam sendo lidos incorretamente pelo IE (que é uma merd...). Então a dica é esta:
Personalizar Layout é usar a imaginação além do que você consegue enxergar.
Funcionalidade é colocar uma função distinta no código.

Abraços!

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Template novo do Política com Pimenta

Luiz Valério é um grande jornalista que escreve artigos de alta qualidade. Sendo assim seu Blog teria que ter uma apresentação à altura. A CSS Padrões produziu um layout clean mas com um ar totalmente profissional para apresentação dos artigos deste grande jornalista.
Com cores bem estudadas, o Blog nos passa seriedade e organização.
Para um jornalista, que nos alimenta com assuntos relevantes, não poderia ser diferente.
Confiram o novo Template do Blog Política com Pimenta.

• Cores sérias


• Organização e estrutura limpa


• Fácil Leitura


• Blog com Layout exclusivo

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Qual o valor que você está dando aos seus Parceiros?

Parcerias é uma coisa que sempre queremos para deixar nossos blogs com mais visibilidade na Internet, mas consegui uma parceria com grandes Blogs se tornou algo cansativo e até irritante.
O Blog coloca a frase no seu SideBar: “Seja nosso parceiro clique aqui!”. Você clica, e quando vai ver, lá está um monte de regras a cumprir para ganhar um linkizinho.

• Você tem que comentar regularmente no Blog


• Seu Blog tem que ter mais de 3 meses de vida (Acho que é pra não ter o trabalho de ter despesas com leite e fraudas. Deve ser isso!).
  
• Seu Blog tem que ser assim e assado (Blah, Blah, Blah)

Tudo bem! O Blog é seu e você exige o que quiser e ninguém tem nada haver com isso.
Porém quando você consegue a parceria, o fulano coloca seu link em uma página (que não é a principal), e ninguém vê você.
Ué? Que porcaria de parceria é essa?
Ta certo! A SideBar dele está entupida de links e realmente não dá para colocar seu link ali porque não tem nem mais espaço pra isso!
Para evitar isso eu crio os meus próprios WidGets na minha SideBar para controlar informações. De forma simples e fácil você também pode fazer isso, e mais, tornar seus Parceiros mais elegantes na sua SideBar sem ocupar muito espaço.

Quando alguém te solicitar parceria, você pode e deve exigir algumas coisas, mas se você aprovar a Parceria, de destaque a ela na sua página principal. Como?
Imagens de 22X22 pixel de seus Parceiros. De uma olhada nos meus Parceiros.

Para isso você só precisa entrar em seu Painel do Blog na página de Elementos e adicionar Gagets HTML/JavaScript e copiar este código:

<style>
#parceiros img{
float:left;
border: none;
margin: 0 3px 5px 0;
}
</style>

<div id="parceiros">
<a href="http://link" target="blank"><img src="http://imagem22X22.gif"/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
<a href="http://link" target="blank"><img src="http:// imagem22X22.gif "/></a>
</div>

Assim você só precisa pedir para seu parceiro a imagem e o endereço de onde ela está hospedada.
E vamos dizer a verdade, assim fica muito mais bonito e você coloca na primeira página.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Para criar CSS precisamos de um Site

Falamos muito de códigos CSS e XHTML, pois este é o foco do Blog, mas um site ou blog precisam ser criados a partir de uma organização de idéias. Então vou publicar uma receita que eu uso para criação dos meus projetos e que talvez possa ajudar algumas pessoas.

Fase de Planejamento

• 1ª fase – Organização de toda informação a ser inserida


• 2ª fase – Construção do conceito do site e da estrutura de navegação. Nessa fase se define se o site será um site padrão, um portal, um blog, etc.


• 3ª fase – Wireframe: primeiro ela é feita no papel para só depois ser desenvolvida com os softwares gráficos


• 4ª fase – Testes


• 5ª fase – Publicação do site, depois de oficializar o domínio e o seu provedor de hospedagem

Como pensar o Site
Basicamente é possível pensar um site dividindo uma página de internet em duas partes:

• O Layout


• O Conteúdo

Primeiro vamos definir o conteúdo. O primeiro passo é pensar no tema do site. Para que essa etapa fique mais completa você deve responder as seguintes perguntas:

- Qual o assunto principal do site?
- É um site de uma empresa? Ele vai vender o quê?
- É um portal sobre um assunto específico como economia, esportes etc?
- É um site pessoal que vai ser usado como portifólio?

Ao responder essas perguntas você terá claramente o principal objetivo do site. O próximo passo é definir sua estrutura:

- Quantas seções ele terá?
- Quais seções serão as principais?
- O que vai ficar em destaque nas barras de navegação?
- Quantas e como serão apresentadas as seções secundárias?
- Quantas seções serão necessárias?

Em geral os sites simples costumam ter uma página inicial que serve também de apresentação, uma página sobre a empresa ou sobre o profissional dono do site, uma terceira que mostra os produtos e os serviços e uma última de contato e/ou localização, se o site for no caso de uma empresa.

Conceito
No plano conceitual podemos dividir um site em duas partes:

• Layout: é a cara do site. O conjunto de elementos que dão identidade, navegabilidade e usabilidade à página da Web. Consiste na marca, no menu principal e no fundo das páginas. O layout é mantido em todas as páginas para criar uma identidade visual. Você deve criar páginas baseadas nesse template, acelerando o desenvolvimento e permitindo que você foque sua atenção na função das páginas.


• Função: cada página deve ter uma definida e distinta das outras páginas, por isso, antes de construir cada página do seu site, você deve definir seu objetivo e usar os elementos de design para alcança-los.

Bom, este é o processo que uso e tem me ajudado muito em relação a organização e produção.
Façam bom proveito e até a próxima.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Template CSS Padrões novinho em folha

A CSS Padrões desde do seu inicio se propôs a não escrever códigos CSS prontos. A razão disto é que eu, particularmente, gostaria que as pessoas adquiram o conhecimentos dos conceitos. Através dos conceitos é que realmente podemos escrever CSS limpas e de qualidade.
Sendo eu um afixionado por CSS, meu template sobre a Terceira mudança desde que o Blog foi concebido.
Eu precisava de um layout que transmitisse o que é realmente a CSS Padrões:

• Um Blog sério que trata sobre CSS e seus conceitos


• Referência para aprendizado das entrelinhas da CSS


• Canal para consciência de que, escrevendo CSS corretamente o desenvolvimento de Blogs e WebSites fica mais fácil e mais produtivo


• Ambiente de perguntas e respostas. (Respostas, lógico, respondidas quando seu caro amigo aqui, conseguir um tempo entre um desenvolvimento e outro)

Sobre o Layout

Fui visitar minha mãe e minha sobrinha estava lendo uma carta. Então pedi para dar uma olhada e vi que se tratava de uma carta escrita em um belo papel.
Cores monocromáticas do preto até o cinza mais sútil.
Logo me veio a ideia de reproduzi-lo em meu Blog. E aqui está!
Dois dias maravilhosos para realizar este trabalho que tanto me agradou.
Então aproveitem!

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Templates com Layout de 3 colunas

Vimos no artigo anterior como fazer um layout de 2 colunas de forma fácil e simples. Agora vamos fazer um Templates de 3 colunas usando o código anterior.
Você precisará adicionar apenas dois elementos dentro da div conteudo.

<div id="conteudo">
<div id="conteudo_principal">
.....
</div>
<div id="segundo_menu">
.....
</div>
</div>

A CSS fica assim agora:

#conteudo {
width: 520px;
float: right;
}

#conteudo_principal {
width: 320px;
float: left;
}

#segundo_menu {
width: 180px;
float: right;
}

#navmenu {
width: 180px;
float: left;
}

#rodapé {
clear: both;
}

O que fizemos foi:
Pegamos o layout de 2 colunas e dividimos o elemento DIV conteudo em duas partes, DIV conteudo principal e DIV segundo_menu. Com isso o conteúdo principal do site ficou em primeiro lugar no fluxo do documento XHTML e os buscadores indexarão melhor seu site.
Existem outras forma de se fazer isso usando margens negativas, mas este assunto será abordado em artigo futuro.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Templates com Layout de 2 colunas sem complicações

Layouts de 2 colunas são fáceis e simples de se fazer. Mas, uma coisa que todos deve prestar atenção ao fazer layouts em CSS, é no conteúdo principal. O conteúdo principal deve estar sempre em primeiro lugar no fluxo do documento XHTML.
Fazendo isso, o Google sempre encontrará seu conteúdo principal e não seus menus em primeiro lugar.
A partir de um layout de 2 colunas será possível criar um de 3 colunas apenas mudando poucas coisa no código. Vamos então por a mão na massa:
Você vai precisar deste código XHTML:

<div id="moldura">
<div id="conteudo">
.....
</div>
<div id="navmenu">
.....
</div>
<div id="rodape">
.....
</div>
</div>

Veja que o conteúdo principal vem primeiro no documento, depois o menu e no final o rodapé.

A CSS para o layout vem a seguir:

#conteudo {
width: 520px;
float: right;
}

#navmenu {
width: 180px;
float: left;
}

#rodapé {
clear: both;
}

Veja como ficará na figura acima.
Lembre-se das dimensões dos elementos para não forçar a moldura.
Para se criar um template de 3 colunas usaremos este mesmo código e verá que criação de templates de 3 colunas são simples, mas isso fica para o próximo artigo.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Destacando diferentes tipos de links

Uma coisa que sempre me deixava irritado era a dificuldade de saber se um link, em uma página, era externo ou interno. Links externo, geralmente, são abertos em uma nova janela, mas isso não é uma boa idéia, pois polui a área de trabalho do visitante.
Uma solução para isso é você estilizar os links externo de seu site, colocando uma imagem ao lado do link com significado.
Você pode fazer criando uma classe para cada link externo:

.externo {
background: url(images/externalLink.gif) no-repeat right top;
}

Muito fácil, mas não é a maneira mais inteligente de se fazer isso, visto que terá que colocar a classe em cada link externo que produzir dentro do seu site ou blog.
Mostrarei uma técnica avançada de atribuição com seletor da CSS3, que já são suportada pelo Firefox e navegadores compatíveis com os padrões.

a[href^=”http:”] {--quaisquer links que começarem com o texto http: serão afetados
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Isso vai destacar todos os links externos de seu site, colocando uma imagem do lado direito (right) superior (top) com espaço do lado direito (padding-right) de 15px.
Porém, todos seus links serão afetados. Se você referência sua própria página, também receberá a estilização. Para resolver isso crie outra propriedade.

a[href^=”http://suapagina.com.br”], [href^=”http://www.suapagina.com.br”] { --suas paginas serão afetadas para ficarem sem estilização
Background-image: none;
padding-right: 0;
}

Aqui removemos a imagem de link externo e redefinimos a margem direita do link.
Simples né?

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Layouts feitos pela CSS Padrões para Blogger

A CssPadrões começa a desvendar o código do Blogger. Para começar nossa experiência um layout foi desenvolvido para nosso parceiro TecnoUtil. Simplesmente mexendo no código CSS (folhas de estilos).
O layout Tecno ÚtilVisite Agora!
Sempre novidade em Tecnologia! se baseou em cima do Mínima, template do blogger, e nele foram acrescentado Elementos de cabeçalho, um para menu de navegação do site e outro para publicidade do Adsense.
Foi incluído também um elementos para referência de parceiros, através de icones de 22X22, assim sobra espaço nas barra laterais para mais informações.
Três colunas no corpo do layout com justificação de texto para postagens.
Após alguns ajustes no templates, que ainda se encontra em teste e aperfeiçoamento, disponibilizaremos para dowloads.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

Centralizando layout com posicionamento e margens negativas

Sem dúvida o método de centralização de layout em CSS mais usado é com margens automáticas, mas tem que se colocar um hack para o IE5.x para que tudo de certo. Também você tem que estilizar dois elementos de vez um só. Por isso prefiro usar centralização com margens negativas.

Mãos a massa:
Crie um contêiner(elemento que envolve seus elementos), defina sua largura. Defina a posição do contêiner como relativa e configura a propriedade left como 50%. Isso posicionará a borda esquerda do contêiner no meio da página.

#moldura { --- elemento que conterá seus divs e suas classes
width: 800px;
position: relative;
left: 50%;}

Você não quer centralizar a borda esquerda do conteiner; você quer centraliza-lo. Então, aplicaremos uma margem negativa do lado do contêiner, igual à metade da largura do contêiner. Isso move o contêiner para esquerda para o meio, centralizando-o na tela.

#moldura { --- elemento que conterá seus divs e suas classes
width: 800px;
position: relative;
left: 50%;
margin-left: -400px;}

Veja que foi usado a especificidade do CSS aqui. Primeiro mandamos o contêiner flutuar com sua borda esquerda para o meio da página, depois enviamos um comando para ele voltar para esquerda para centralizar.
Em artigo futuro falarei mais sobre Especificidade do CSS.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email