Arquivo da tag: css

Sites usando HTML5 e CSS3

Fonte: James Leme/cssextremo

O uso do HTML5, em combinação com CSS3, está realmente começando a decolar. Safari, Chrome e Mozilla estão dando mais suporte a cada nova versão de seus navegadores.

A melhor maneira de aprender novas técnicas é tentando. Atualmente você já pode começar a usar HTML5 apenas mudando o tipo de documento.

<! DOCTYPE HTML>

Ele vai validar com o seu código atual, mesmo se você estiver usando XHTML ou HTML.

Para você se inspirar e começar a usar HTML5 e CSS3, listei alguns dos melhores sites usando essas tecnologias.

Edgar Leijs

Vaullt

Ella Design

Como Escolher as Melhores Cores para o Blog?

Fonte: CriarSites

Este é um guest post que foi escrito por Vinicius Horta do blog Dinheiro Web.

O Blog é formado por um conjunto, não adianta ter o melhor conteúdo se o layout é desagradável, boa parte do que pode tornar um layout simplesmente insuportável é uma má escolha de cores na hora de customizar seu theme wordpress.

Sempre vale lembrar aquelas velhas dicas de evitar cores muito fortes e/ou excessivamente contrastantes (principalmente próximo ao texto), evitar uma diversidade de cores muito grande também é bom, ajuda a manter o layout mais clean.

Entre diversos ótimos themes que já observei na web algo que encontre como fator em comum é ter uma única cor predominante além do branco que é trabalhada em suas tonalidades assim compondo o theme. Um ótimo exemplo disto pode ser visto aqui mesmo no theme do Criar Sites, que possui basicamente apenas 3 cores (branco, amarelo e cinza), assim se tornando um blog de leitura agradável, não cansa a vista e não nos confunde com muitas cores.

Como escolher uma Boa combinação de cores?

É natural vermos ótimas combinações, porém saber que combinação ficará agradável é que fica realmente difícil sem ter ferramentas que possam ajudar nesta tarefa, mas existem ótimas soluções online para isso!

Uma ótima ferramenta online gratuita para escolher um padrão de cores é o Color Blender, com ele poderá inserir a cor principal que deseja para seu theme. Para que tenha uma melhor noção de como esta ferramenta funciona peguei a cor principal aqui do Criar Sites, onde a cor predominante é o amarelo da barra superior de navegação e vejam as cores oferecidas pelo Color Blender:

Os números e símbolos em vermelho eu que editei para poder fazer alguns comentários explicando o quanto esta ferramenta pode ser útil.

1 – A cor inserida por mim para uso do Color Blender.

O site me sugeriu 5 cores que combinam com esta cor inicial, repare que a cor marcada como cor número 2 está sendo utilizada como backgruond aqui no Criar Sites!

A cor número 3 se por acaso ainda está procurando se encontra nos links! Como pode ver um blog de sucesso como o Criar Sites não se faz apenas de ótimos artigos, mas também de outros recursos que também são importantes. Não sei se Celso Lemes utilizou esta, outra ferramenta ou se utilizou sua experiência, o fato é que acertou na mosca!

Até mesmo as variações da cor principal irá encontrar no blog se olhar atentamente, fazendo este post observei com cuidado cada uma das cores, e encontrei todas as cores sendo utilizadas com perfeição!

Como Fazer a Alteração de cores de seu Theme WordPress

Alterar as cores em seu theme é bem simples, basta que abra o arquivo style.css em um editor (até o bloco de notas serve), mas recomendo o notepad++ que possui funções bem interessantes e certamente poderá ajudar no processo.

Vamos partir do princípio de que seu objetivo seja alterar a cor daquela pequena linha que separa um post do próximo no expert de seu theme, aquela cor não lhe agrada e deseja mudar, ok! Com seu style.css aberto encontre as referência a seu excerpt (ctrl + F ajudará muito), encontrará algo mais ou menos como isso:

excerpt {

margin:0 0 25px 0;

position:relative;

padding:10px 0 20px 0;

height:100%;

border-bottom:1px solid #cfcfcf;

overflow:hidden;

}


Como pode ver há um código hexadecimal de cor para linha, que neste caso é “#cfcfcf”, que poderá ser trocada por qualquer outra cor que desejar, tanto uma cor que obteve no Color Blender como também de qualquer cor, que pode inclusive ser facilmente consultada na tabela de cores do Dreamweaver, que é uma tabela que possui tanto os códigos Java (RGB) como também os HTML, para o CSS utiliza-se o hexadecimal que é o HTML e pode ser facilmente consultado.

O mesmo processo deve ser feito com todas as cores que pretende alterar em seu blog, se por acaso não encontrar a cor de um elemento em seu style.css certifique-se de que seu theme não possui outros arquivos css (o que é bastante frequente).

CSS3 – Faça elegantes botões com a ferramenta online Css-tricks

Fonte: CriarNet

O CSS3 assim como o HTML5 é uma novidade na internet que promete revolucionar bastante a forma com que formatamos as nossas páginas com as folhas de estilo, ela traz novos recursos que nos abre um leque de novas opções para a formatação de nossas páginas. Se você pretende usar CSS3 em seus sites conheça a ferramenta CSS-Tricks que cria elegantes botões com efeitos arredondados feitos com o CSS3. Conheça a ferramenta.

Você poderá criar os seus botões e usa-los de diversas formas, em um menu, em um botão como link, ou de qualquer forma que você desejar.

Como criar elegantes botões em CSS3 usando o Css-Trick

O primeiro passo é acessar o site do gerador de botões, click aqui, logo depois mecha com os atributos mexendo nas barras para a direita e para a esquerda. E modificando as cores de acordo com a região especificada nas barras abaixo.

Quando o botão estiver sexy, pegue o código fonte do mesmo clickando em um link presente na parte de baixo da página a direita, porem a grande dica que eu dou aqui é que você analise o código fonte e aprenda as novas propriedades do CSS3 e não apenas copie o código e aplique em seu site.

Como gerar gráficos no Rails com o CSS Graphs

Fonte: Samuel Vinicius/IMasters

Post Original http://nubyonrails.com/pages/css_graphs

O CSS Graphs é um bom plugin para quem deseja gerar gráficos no Ruby on Rails usando apenas CSS. Para quem ainda tem alguma dúvida, veja como utilizá-lo:

Instalação

./script/plugin install http://topfunky.net/svn/plugins/css_graphs

Como usar

Para usá-lo, o seguinte código basta:

<%= bar_graph  [ ['Rails', 24],
                    ['Open', 9],
                    ['Css', 81],
                    ['Gráficos', 57],
                    ['Samuel', 42]] %>

Ou:

<%= complex_bar_graph  [ ['Rails', 24],
                  ['Open', 9],
                  ['Css', 81],
                  ['Gráficos', 57],
                  ['Samuel', 42]]%>

Como criar um template responsivo para WordPress

Fonte: Paulo Faustino/IMasters

Depois de termos escrito e publicado uma série de doze artigos sobre Como criar um template WordPress, e porque as tecnologias estão constantemente avançando e melhorando, é necessário estar sempre na vanguarda da tecnologia para garantir os melhores resultados possíveis e a melhor experiência de utilização possível para o usuário.

A navegabilidade e usabilidade são hoje um aspecto extremamente importante na vida e no sucesso de um site/blog. E por isso não podemos fechar os olhos para as linguagens como o HTML5, CSS3 e também o Webdesign responsivo, que basicamente significa um layout de site/blog que responde automaticamente às diferentes resoluções de uma tela de um computador pessoal, de um smartphone ou de um tablet, ajustando todo o layout e os seus elementos para garantir a melhor experiência de navegação possível para o usuário.

Os colegas do Blissfull Interfaces lançaram recentemente um artigo interessante sobre a criação de um tema responsivo, que juntamente com o nosso guia completo sobre Como criar um template WordPress, poderá ajudá-lo a tornar o seu template wordpress responsivo ou ajudá-lo na criação dos seus temas WordPress futuros de uma forma mais moderna e adaptada às necessidades de hoje em dia.

Para criar um tema WordPress responsivo, você pode utilizar queries de CSS3. Para compreender este artigol, você já deverá saber como criar um template WordPress e ter alguns conhecimentos de CSS.

Hoje vamos aprender a criar uma child theme e usar queries de media em CSS3, para fazer com que o nosso layout se adapte às diferentes resoluções de telas dos vários aparelhos existentes no mercado.

  1. Na pasta ‘themes’ do seu WordPress, crie um novo arquivo chamado ‘multiplescreen’;
  2. Crie uma pasta CSS dentro do seu novo arquivo ‘multiplescreen’ e dê o nome de ‘style.css’.

Um ficheiro de CSS do tipo ‘style.css’ é a única coisa que você necessita para criar uma child theme. Adicione o seguinte código ao seu arquivo ‘style.css’.

Importante: Assumimos que o nome do seu template se chama ‘EscolaWP’.

Substitua o nome ‘EscolaWP‘ pelo nome do seu Template.

/*
Theme Name: EscolaWP Child
Theme URI: http://www.escolawp.com/
Description: Child theme para EscolaWP
Author: Seu Nome
Author URI: http://www.escolawp.com
Template: EscolaWP
Version:0.1.0
*/

Tal como acontece com qualquer tema WordPress, o cabeçalho de informação tem de estar no topo do arquivo CSS. A única diferença entre um arquivo de CSS e uma Child Theme é o campo Template: é obrigatório, para que o WordPress perceba qual é o Template mãe e filho, respectivamente.

Agora iremos necessitar de chamar a nossa folha de estilos parente para dentro da nossa child theme. Adicione o seguinte código ao seu novo arquivo de CSS. A função @import url.. chama a pasta de CSS do seu Template mãe para dentro do seu CSS do Template filho.

@import url(“../twentyten/style.css”);

Para verificarmos se a nossa child theme está funcionando corretamente, vamos mudar os títulos H1 da child theme para cor-de-laranja. Substitua o código anterior que chama o CSS do Template mãe, por este novo:

@import url(“../twentyten/style.css”);
h1
{
color: #ffb400;
}

Importante: Tenha certeza de que não aparece estilos antes do @import url.. Se isso acontecer, o CSS da nossa child theme não consegue carregar os estilos parentes.

Agora faça login no painel de administração do seu WordPress, active o template EscolaWP Child no menu Aparência –> Templates. Agora verifique como se encontra o seu blog WordPress num browser de Internet. Você deverá ver o seu template idêntico, mas apenas com os títulos H1 na cor-de-laranja.

Agora precisamos definir quais as medidas de media que vamos usar no nosso layout. Eis as três mais comuns:

  1. SmartPhones- Menos de 320px;
  2. Tablets – Entre 321px e 768px;
  3. Desktop – 769px e superiores.
@media screen and (max-width:320px)
{
h1 {
color: #ffb400;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#0096ff;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #693573;
}
}

Grave o seu arquivo de CSS. Para testar as diferentes medidas, simplesmente abra o seu site em um browser de Internet e arraste a janela para diferentes dimensões, para verificar se o layout se adapta automaticamente. Você irá verificar uma mudança de cor no H1 color quando a dimensão reduz. Não esqueça de remover as alterações de cor no H1 caso não pretenda mantê-las.

Bom, é isso, pessoal! Até a próxima.

LESS CSS: Início, Meio e Fim – Conceitos iniciais

Fonte: Fabrício Sanchez!

A internet evolui diariamente, isso é um fato. Tal evolução demanda cada vez mais recursos (tanto para quem utiliza aplicações e serviços web, quanto para quem os implementa).

No sentido de incrementar produtividade e adicionar melhores práticas ao processo de desenvolvimento de aplicações para a internet, a comunidade técnica de desenvolvedores ao redor do mundo constantemente implementa, disponibiliza e mantém novos recursos ativos. Alguns exemplos são:

  • PDF Sharp: um complemento para processar programaticamente arquivos PDF.
  • JSON .NET: um framework de alta performance para o trabalho com JSON.
  • MVC Contribut: framework escrito para desenvolvedores que desejam testar elementos de UI em suas aplicações MVC.

Nesta série apresentaremos os conceitos fundamentais relacionados a um novo framework escrito nos padrões mencionados anteriormente, isto é, desenvolvido e mantido pela comunidade técnica que tem por objetivo permitir a escrita de código CSS de forma otimizada: LESS CSS.

Observação: esta série não ensinará CSS. Aqui, partimos do princípio de que os conceitos relacionados a esta linguagem já são conhecidos por você e nos concentramos apenas em apresentar uma nova forma de trabalhar com eles.

O que é LESS CSS?

LESS é um termo da lingua inglesa que designa “menos – menor quantidade”. A framework alvo de nosso estudo nesta série tem este nome (LESS CSS) não por acaso. LESS CSS é uma framework escrita com o ojetivo de otimizar a escrita de códigos na linguagem CSS, fato este que necessariamente implica na diminuição da quantidade de código escrito. Menos código escrito significa mais performance na renderização das páginas, o que implica em maior velocidade na exibição da informação para o usuário final.

Além das características recém mencionadas, há um aspecto proporcionado por esta framework que é determinante para sua adoção: o desenvolvedor pode escrever códigos mais limpos e elegantes, conforme veremos com a evolução da série.

CSS dinâmico?

Se existe uma palavra que chama atenção de qualquer desenvolvedor que inicia seus estudos em uma linguagem, framework, whatever, está palavra é “dinamismo”. De forma geral, bons devs buscam encontrar melhores formas de escrever seus códigos e, tecnologias que apresentam aspectos dinâmicos, sempre se apresentam como opções interessantes.

Conforme apresenta a imagem do início deste texto, LESS CSS apresenta uma forma dinâmica de escrever folhas de estilos (It’s the dynamic stylesheet language). O “dinamismo” é proporcionado por recursos como: variáveis, mixins, operações, funções, etc. (falaremos individualmente sobre cada recurso nos próximos posts).

Onde funciona?

Uma característica interessante do LESS CSS é que este funciona tanto do lado do cliente quanto do lado do servidor (neste último utilizando Node.js e Rhino). Assim, podemos “escolher” o ambiente para renderização do código LESS. Em post futuro, falaremos especificamente sobre como utilizar em ambos os cenários.

Criando o mind set

Agora que os conceitos estão “saltando a vista”, basta realizarmos uma análise simples em no modelo tradicional de escrita de códigos CSS para obtermos uma auto-justificação do LESS. Assim, considere o código apresentado pela Listagem 1.

#BoxTexto { color: #000; background: #EFEFEF; }
#BoxTexto a { text-decoration: underline; }
#BoxTexto p { font-family: Arial; }
#BoxTexto x {...} #BoxTexto y {...}
#BoxTexto z {...}

Listagem 1. Forma tradicional de escrever código CSS

O problema é evidente, certo? Para que possamos utilizar o mecanismo de herança, precisamos reecrever o mesmo código seis vezes. Em um tempo onde produtividade é fator chave no processo de desenvolvimento de software, este tipo de notação tende a cada vez mais, cair em desuso.

Em contra partida, observe o código apresentado pela Listagem 2.

#BoxTexto {
color: #000;
background: #EFEFEF;
a { text-decoration: underline; }
p { font-family: Arial; }
}

Listagem 2. CSS reduzido

Bem melhor não? Esta é a proposta do framework LESS. O mesmo código escrito de forma mais elegante e inteligente resultando no mesmo aspecto visual entretanto, com mais performance.

Qualquer fonte no seu site com @fontface

Fonte: Rafael Cirolini/NeardHead

Em geral sempre que vem um layout novo temos que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar aqui.

A grande vantagem do uso do @fontface é por ser um recurso do próprio CSS e carregar muito rápido no navegador em comparado com as outras técnicas. Nos meus testes esta técnica funcionou em todos os navegadores modernos, inclusive no IE6 (que não é moderno).

Usei esta técnica em meu mais recente site, Dicas de Livros e Filmes. Como segue a imagem abaixo:

Font Face Generator

Antigamente era um pouco complicado usar o fontface pois cada navegador trabalhava com um tipo de fonte diferente. Hoje a solução que temos é o FontFaceGenerator, que através de uma interface bem intuitiva gera todos os tipos de fonte para vc e ainda um código de exemplo de como utilizar.

No meu caso, eu coloquei as fontes geradas em uma pasta chamada fonts dentro da pasta do meu tema em wp-content -> themas -> dicasdelivros -> fonts.

E o meu css ficou assim:

@font-face {
    font-family: 'SketchetikLight';
    src: url('fonts/sketchetik.eot');
    src: url('fonts/sketchetik.eot?iefix') format('eot'),
         url('fonts/sketchetik.woff') format('woff'),
         url('fonts/sketchetik.ttf') format('truetype'),
         url('fonts/sketchetik.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

E quando preciso usar ela fica assim:

h1 {
    font-family: 'SketchetikLight';
}

Em outro artigo escrevi como usar o Cufón.

Como começar nesse mundo louco da Web?

Eu sempre recebo perguntas no forum do mxmasters ou mesmo por e-mail, de pessoas que devem estudar para começar a desenvolver seus sites ou mesmo algumas dicas e/ou também qual referência de blog/site que seria interessante. Acho o que a pessoa tem que aprender, de forma sólida é html e css. É impressionante os “analfabetos” de html e css, devido a utilização de programas como Dreamweaver. Mas tudo pode ser revertido. Muitos defendem que desenvolver os códigos é um retrocesso, conhecido “reinventar a roda”, mas não se trata de reinventar, e sim saber o que é mais produtivo, e sem sombra de duvidas, desenvolver o seus próprio código é a melhor solução. Mas por quê? Não podemos pensar na concepção imediata do site, temos que pensar nas mudanças que irão ocorrer, e você pode ter certeza que irão ocorrer.

Então vamos colocar alguns pontos que seriam interessantes ser estudado e algumas dicas:

  • Aprender html e css, isso é de vital importância. Não depender de programas, se em algum momento você tiver apenas o bloco de notas, você resolve.
  • Aprender a utilizar um editor de imagem, como photoshop, ou fireworks, ou outros programas. Não tenha medo de testá-los até encontrar um que te agrade mais.
  • Aprenda Javascript, ou aprenda a utilizar um framework, uma boa pedida é o jquery, é de fácil aprendizado e muito produtivo.
  • Aprenda alguma linguagem server-side, indico o php, por ser uma linguagem de fácil aprendizado, e por ter muito material na web.
  • Adquira livros. Na maioria dos casos vão te ensinar coisas que tutoriais não ensinam de uma maneira mais sólida.
  • Aprenda a utilizar o Google. Sabendo pesquisar, e não tendo preguiça você consegue arrumar soluções rápidas;
  • Não desista na primeira dificuldade. Esse é mau de muitas pessoas, quando esbarram no primeiro desafio, não tentam resolver. Lembre-se da sugestão anterior.
  • Participe dos fóruns. Você vai encontrar muitas soluções de duvidas que você tem.
  • Aprenda a ajudar. Quando você tentar ensinar algo, você aprender muito mais.
  • Não seja arrogante. Acredite, dizer que sabe tudo de determinado assunto, é comprovadamente mentira, existe sempre algo a aprender.
  • Aprenda a filtrar as informações. Nem tudo que escrito nos blog é uma verdade absoluta(inclusive no meu);
  • E não utilize o IE. Parece brincadeira, e até um pouco. Mas outros navegadores, como firefox não são simples navegadores, e sim ferramentas de desenvolvimento. Na sua caminhada, com certeza você vai odiar o IE6.
  • Não tenha medo de outros idiomas, nada que o Google tradutor não possa te ajudar.

Espero que essas dicas sejam válidas, isso não é uma regra, ou mantra que deve ser dito, mas são alguns passos que te ajudarão nessa nova jornada.

Fonte: DavidCHC

3 Métodos para criar colunas de largura igual com CSS

No mundo da programação, uma das coisas que não é fácil fazer, nomeadamente em CSS é criar colunas de igual largura. No entanto, e como o caro leitor sabe, não há impossíveis! Através de um destes quatro métodos que lhe vamos apresentar, poderá facilmente criar colunas de igual largura em CSS. Durante a apresentação destes quatro métodos poderá observar que existem prós e contras, que em nada alteram o resultado final – colunas com largura igual. Este artigo foi baseado num artigo dos colegas do Vanseodesign. Aconselhamos a leitura dos nossos artigos de CSS para principiantes, nomeadamente CSS para Tótós!, Tutorial: Aprender o básico sobre CSS e ainda Começando com CSS – Dê os primeiros passos em segurança que o irão ajudar a fazer a introdução a esta linguagem, para completar com sucesso os 3 Métodos para criar colunas de igual largura com CSS!

1. BORDERS & NEGATIVE MARGINS

Este método é bastante conhecido e também bastante simples de aplicar. Consiste em definir limites e margens negativas para dar a ilusão de colunas com largura igual. Como temos vindo a dar enfase, o melhor para aprender é praticar, e é isso que vamos fazer:

1. Crie um ficheiro HTML com o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    width:960px;
    margin: 0 auto;
}
#content {
    float:left;
    width:700px;
    border-left: 260px solid #555;
}
#sidebar {
    float: left;
    width:260px;
    margin-right: -260px;
    position: relative;
}

3. Guarde o ficheiro HTML e o ficheiro CSS e observe o resultado prematuro:

4. Neste método as cores de fundo são definidas em #content no ficheiro CSS. Definimos o limite a 260px para criar espaço para a sidebar e definimos o fundo desse limite, que é o fundo da sidebar. Depois define-se a margem direita negativa de 260px para mover a sidebar para onde queremos, no espaço que criámos dentro do #content, para mover a sidebar para onde queremos. Como o #container está hierarquicamente por cima da #sidebar, é necessário dar a posição relativa para que saia de trás do #content. E basicamente temos as colunas criadas!

2. PSEUDO COLUMNS

As pseudo colunas são uma boa alternativa às “faux columns” pois não necessitam de utilizar uma imagem no fundo como uma cor de fundo. No entanto este método continua a ser similar às faux columns pois também envolve o método de definir um fundo no container. Este não é um método comum, e por isso mesmo é um pouco restrito relativamente a onde pode ser aplicado, mas quando encontrar essa situação onde pode ser aplicado, funciona perfeitamente. Passamos a praticar:

1. Crie um ficheiro HTML e insira o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    background: #555;
    overflow: hidden
}
#content {
    float:left;
    width:75%;
    background:#eee;
}
#sidebar {
    float:left;
    width:25%;
    background:#555;
}

3. Guarde os ficheiros e observe o resultado:

4. Além da utilização de percentagem ao invés de px, irá notar algumas diferenças relativamente aos outros métodos, como a definição da cor de fundo no #sidebar e no #content. Como referimos neste caso utilizamos uma cor de fundo, e não uma imagem de fundo. A limitação deste método prende-se com o facto de ter de haver uma coluna mais pequena que outra, uma diferença que não se deverá notar por parte de quem visita a página.

3. FAUX COLUMNS

Este método já data de 2004, quando foi introduzido pela primeira vez numa página web. Não só por causa da sua antiguidade mas também pela sua facilidade e fiabilidade, as faux columns são provavelmente o melhor método para criar colunas de igual largura. Em termos básicos, consiste em utilizar uma imagem que é repetida verticalmente, mantendo desta forma a mesma largura ao longo do eixo vertical. Vamos praticar:

1. Crie um ficheiro HTML e insira o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida baixe este ficheiro e insira-o na pasta onde estiverem os ficheiros HTML e CSS. Crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    width:960px;
    margin:0 auto;
    background: url("faux-columns.png") repeat-y;
    overflow: hidden
}
#sidebar {
    float:left;
    width:340px;
}
#content {
    float:left;
    width:620px;
}

3. Guarde os ficheiros HTML e CSS e observe o resultado:

4. Por outro lado também poderia ter sido usado o <body> como container, mas é preferível criar uma div para esse efeito. O container tem a largura de 960px, e essa largura terá de ser dividida entre a sidebar e o content. Para fazer uma divisão esteticamente bonita, optamos por criar a sidebar com 340px e o container com 620px. Aquilo que irá diferenciar a sidebar e o content é a sua cor de fundo. Como referenciamos anteriormente, utilizámos uma imagem como cor de fundo não só para dar cor como também para delimitar as áreas de conteúdos. Como nota adicional, é necessário definir o overflow: hidden para que a div container se mantenha como pretendemos. Este método é especialmente indicar para larguras fixas, mas poderá obter bons resultados com larguras não fixas.Obviamente não está limitado à cor e estética dada pela imagem de fundo, podendo adicionar efeitos ao seu gosto e alterando a imagem de fundo.

Fonte: Diogo Espinha/escolacriatividade

Menu drop down no WordPress com css e Jquery

A pedido do Matheus vamos hoje falar sobre como fazer menus no wordpress fazendo as sub-paginas aparecerem como um menu drop down usando CSS e jQuery.

O menu deve ficar algo mais ou menos assim:

Como na verdade este tutorial é uma continuação do anterior, Como criar menus no WordPress não vamos explicar aqui novamente o que já falamos lá.

Como fizemos no tutorial anterior colocamos no seu tema a função: wp_list_pages() para listar as paginas, a unica diferença agora é que vamos tirar o parâmetro depth da mesma, deixando assim:

<ul id="nav">
<?php wp_list_pages(); ?>
</ul>

Isto vai gerar um codigo mais ou menos desta maneira:

<ul id="nav">

    <li class="page_item page-item-1 current_page_item">
        <a href="http://www.geniusdeveloper.com.br" title="home">home</a>
    </li>

    <li class="page_item page-item-225">
        <a title="Plugins" href="http://www.geniusdeveloper.com.br/plugins/">Plugins</a>
        <ul>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
        </ul>
    </li>

    <li class="page_item page-item-4">
        <a title="Sobre Nós" href="http://www.geniusdeveloper.com.br/sobre-nos/">Sobre Nos</a>
    </li>

    <li class="page_item page-item-6">
        <a title="Contato" href="http://www.geniusdeveloper.com.br/contato/">Contato</a>
    </li>
</ul>

E aqui segue o nosso css:

#nav {
    list-style: none;
}

#nav * {
    padding: 0; margin: 0;
}

#nav li {
    float: left;
    margin: 0 12px 0 0;
    height: 32px;
}

#nav li a {
    color: #b5c6e4;
    text-transform:uppercase;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 8px;
    height: 16px;
    display: block;
    text-align:center;
    width:100px;
}

#nav li a:hover {
     background: #203461;
}

.current_page_item {
    background: #203461;
}

#nav ul {
  display: none;
  text-align: left;
  width:100px;
  font-weight: normal;
  line-height: 20px;
  list-style: none;
  margin: 0 0 0 10px;
  float:left;
}

#nav li li {
  border: 1px solid #E3E0D5;
  background: #F3EFEB;
  font-size: 11px;
}

#nav li li a {
  padding: 4px 10px 0 10px;
  width: 150px;
}

#nav li li a:hover {
    background: none;
    color: #000;
}

#nav li:hover ul {
        display:block;
}

O que fazemos basicamente alem de dar o estilo ao menu é esconder a lista de dentro da lista. E depois exibir ela quando passamos o mouse por cima. A estrutura mais básica que poderíamos pensar seria assim:

<style type="text/css">

#nav ul {
  display: none;
}

#nav li:hover ul {
        display:block;
}

</style>

<ul id="nav">
    <li>
        <a href="#">menu</a>
        <ul>
            <li>
                <a href="#">sub-menu</a>
            </li>
            <li>
                <a href="#">sub-menu</a>
            </li>
            <li>
                <a href="#">sub-menu</a>
            </li>
        </ul>
    </li>
</ul>

Acredito que com esta estrutura básica deve ter ficado mais claro para vc como funciona.

Mas nem tudo são flores, como o titulo ja diz, vamos ter que usar o jQuery para fazer o menu funcionar, quero dizer, quase isto, vamos ter que usar o jQuery para o menu funcionar no IE, pois ele somente suporta a pseudo classe :hover sobre um link e não sobre uma lista como estamos fazendo para o nosso menu funcionar. Então, temos que nos preucupar que o nosso tema ative o jQuery e incluir o nosso arquivo js no tema, para isto vamos colocar este codigo no nosso functions.php:

add_action('template_redirect', 'gd_add_js');

function gd_add_js(){

    //nao vamos precisar disto no admin
    if(is_admin()) return;
    wp_enqueue_script('app', get_bloginfo('template_directory') . '/scripts/app.js', array('jquery'));
}

Isto vai fazer duas coisas, uma chamar o nosso script js e ainda vai verificar se o jquery já esta ativo, se não tiver ativa o mesmo.

Vamos ao codigo do app.js:

//<![CDATA[
jQuery(document).ready(function(){
    jQuery('#nav li').hover(
        function() { jQuery('ul', this).css('display', 'block'); },
        function() { jQuery('ul', this).css('display', 'none'); });
});
//]]>

Este codigo em jQuery faz que quando tivemos o cursor em cima do #nav li ele adiciona ao ul sobre ele a propriedade display blog, e quando tiramos o mouse volta o display none.

Desta forma vc ja vai ter um belo menu drop down no seu blog.

Fonte: Rafael Cirolini/Nerd Head

Prós e Contras do WordPress e Blogger

O WordPress e o Blogger são duas das plataformas mais utilizadas na criação de blogs, cada um com suas vantagens e desvantagens, que devem ser levadas em consideração por quem deseja iniciar um novo blog.

Abaixo você pode conferir uma lista com as principais vantagens e desvantagens oferecida por cada uma destas duas plataformas, que podem te ajudar na hora de iniciar um novo projeto.

WordPress

O WordPress oferece duas versões de sua plataforma, sendo uma que pode ser criado facilmente no WordPress.com e também um pacote que pode ser baixado no WordPress.org e instalado em um servidor apropriado.

Basicamente, a diferença entre os dois está no fato de que o WordPress.com é mais limitado, não permitindo editar ou instalar novos templates, adicionar novos plugins ou adicionar publicidades, enquanto que no WordPress instalado você tem muito mais liberdade para fazer tudo isso.

Prós do WordPress:

wordpressTemplates

WordPress.org – Permite adicionar novos templates e também editá-los de uma forma mais fácil em relação ao Blogger.

WordPress.com – Não permite adicionar ou editar templates.

Plugins

WordPress.org – Permite adicionar novos plugins que dão mais funcionalidades a plataforma, como é o caso de contadores de visitas, melhoramentos na navegação, backups automáticos, sistemas de newsletter e etc.

WordPress.com – Tem um número limitado de plugins e não permite adicionar plugins novos.

Proteção por senha

WordPress.org e WordPress.com – Permitem proteger qualquer página ou post com uma senha, impedindo que qualquer pessoa tenha acesso ao conteúdo.

Maior controle sobre os dados do blog

WordPress.org – Você tem acesso total ao banco de dados e os arquivos que compõem o blog, o que dá liberdade para ter uma cópia local de seu blog e movê-lo para outra hospedagem a qualquer momento. Você é dono do seu conteúdo.

WordPress.com – Não permite acessar os arquivos ou o banco de dados. No entanto, isso só seria um problema caso seu blog esteja fora das diretrizes de uso do próprio WordPress, que neste caso poderia deletar a sua conta.

URLs amigáveis

WordPress.org e WordPress.com – O WordPress permite customizar a URL dos posts e páginas, tornando mais amigáveis para os buscadores.

SEO

WordPress.org e WordPress.com – O WordPress por si só já é melhor em relação a SEO e fica melhor ainda depois de instalar alguns plugins como o All in One SEO Pack, que oferece uma melhor customização dos títulos dos posts (que aparece no topo dos navegadores), meta tags, descrição e etc.

Empresas de hospedagens oferecem a instalação do WordPress com 1 clique

WordPress.org – Quem deseja optar pelo WordPress instalado, poderá usufruir do sistema de auto instalação oferecido pela maioria das empresas de hospedagem de sites.

Criação de páginas infinitas

WordPress.org e WordPress.com – O WordPress permite criar páginas estáticas infinitas, ao contrário do Blogger que atualmente só permite adicionar 20.

Contras do WordPress:

Maior conhecimento técnico

WordPress.org – Um blog instalado exige maior conhecimento sobre os procedimentos relacionados a publicação de arquivos, preparação do banco de dados e instalação do WordPress, o que não acontece no Blogger ou no WordPress.com

Não é de graça

WordPress.org – Para ter um blog instalado é necessário adquirir uma hospedagem profissional (as hospedagens grátis não são recomendadas) e 1 domínio próprio, o que pode custar algo em volta de R$15,00 por mês.

Mais responsabilidades

WordPress.org – Para que seu blog esteja seguro, é necessário que você cuide de realizar backups periódicos para se prevenir em caso de uma catástrofe. Além de estar encarregado de verificar se tudo está funcionando corretamente com o servidor de hospedagem.

Publicidade

No WordPress.com é proibido a inclusão de qualquer tipo de publicidade, tanto é que as publicidades do Google Adsense não aparecem de jeito nenhum no blog.

Blogger

O Blogger é uma plataforma oferecida gratuitamente pelo Google, que também permite criar blogs incríveis, mas que não são tão bons em relação a customização e otimização para os buscadores.

É Grátis

Desde que você opte pelo subdomínio grátis (seublog.blogspot.com), você não precisa pagar nada, mas se quiser adquirir um domínio, terá que desembolsar $10 por ano.

Templates grátis

O Blogger também conta com centenas de templates grátis.

Não precisa se preocupar com backup

O próprio Google se encarrega de cuidar do backup de seus arquivos e do banco de dados.

É mais fácil para se cadastrar no Google Adsense

Quem tem uma conta no Blogger, tem mais facilidade para criar uma conta no Google Adsense para ganhar dinheiro com o blog.

Proteção por senha

O Blogger apenas permite adicionar um usuário e senha para o blog que abrange o blog todo, diferente do que acontece com o WordPress que permite proteger páginas individuais.

Contras do Blogger:

Não permite armazenar outros tipos de arquivos

O Blogger somente oferece a hospedagem de imagens. Se precisar armazenar outros tipo de arquivos, terá que utilizar serviços de armazenamento oferecidos por terceiros. No WordPress.org você não tem este tipo de problema.

Não oferece categorias

O Blogger não permite organizar o conteúdo por categorias como acontece no WordPress. A única forma de organizar o conteúdo por seções é através dos marcadores, que são conhecidos por TAGS no WordPress.

Não permite editar comentários

Você não pode editar os comentários deixados pelos visitantes.

Não permite editar a URL dos posts

A URL dos posts não pode ser editada.

Não permite adicionar meta tags individuais

Você somente tem a opção de adicionar meta tags de uma forma generalizada, que aparece igual em todos os posts e páginas do blog.

Não permite editar os títulos

O Blogger não permite adicionar um título para as páginas (que aparece no topo dos navegadores) diferente dos títulos dos posts, o que pode atrapalhar um pouco a otimização do blog.

Reputação ruim

De uma forma geral, o Blogger tem uma má reputação devido aos montes de blogs spams que são criados diariamente. O que pode levar muitas grandes empresas a bloquearem o acesso de seus funcionários a qualquer blog que utilize um subdomínio oferecido pelo Blogspot.com.

Templates com código sujo

Os templates do Blogger em sua maioria contém códigos desnecessários e também carregam todo o CSS dentro do mesmo arquivo XML, o que aumenta o tempo de carregamento do blog e pode prejudicar no posicionamento do blog nos buscadores.

Conclusões

Para resumir, eu diria que o Blogger é mais recomendado para quem deseja criar um blog pessoal ou mesmo que pretenda criar um blog profissional, mas ainda não tem certeza de que dará continuidade no projeto. Digo isso porque a maioria dos blogueiros abandonam seus blogs nas primeiras semanas.

Se depois de uns 3 meses, ainda estiver trabalhando firme na criação de conteúdo para seu blog, recomendo que mude para o WordPress, pois as chances de ter sucesso são maiores. Se este for o seu caso, recomendo que leia o artigo “Como transferir o Blogger para o WordPress“.

Fonte: Celso Lemes/CriarSites

Closure Stylesheets do Google facilita a manipulação de código CSS extenso

O Google liberou como open source sob a Licença Apache 2.0, o projeto Closure Stylesheets, que define uma extensão do padrão CSS e oferece ferramentas, para facilitar a manipulação de arquivos CSS extensos.

Parte do pacote Closure Tools e criado em Java, o projeto adiciona variáveis, funções, condicionais e mixins ao CSS. Com o Closure Stylesheets o desenvolvedor trabalha com as Google Stylesheets (GSS), que são processadas pela ferramenta para gerar arquivos CSS padrão, usados por aplicações ou sites web.

Variáveis

Variáveis são definidas usando @def:

@def BG_COLOR              rgb(235, 239, 249);
@def DIALOG_BG_COLOR       BG_COLOR;
body {
background-color: BG_COLOR;
}
.dialog {
background-color: DIALOG_BG_COLOR;
}
 
O CSS resultante para o bloco acima é:
 
body {
background-color: #ebeff9;
}
.dialog {
background-color: #ebeff9;
}

Functions

O projeto introduz uma série de funções aritméticas para a manipulação de valores númericos (ex.: medidas em pixels): add(),sub(), mult(), div(), min() e max(). Veja um exemplo com a função add():

@def LEFT_WIDTH    100px;
@def LEFT_PADDING  5px;
@def RIGHT_PADDING 5px;
.content {
position: absolute;
margin-left: add(LEFT_PADDING,
LEFT_WIDTH,
RIGHT_PADDING,
px);

Aqui está o bloco de CSS resultante:

.content {
position: absolute;
margin-left: 110px;
}

Condicionais

O Closure Stylesheets permite o uso de @if, @elseif e @else para a criação de estruturas condicionais baseadas no valor de algumas variáveis.

Mixins

Mixins são estruturas que permitem o reuso de declarações parametrizadas. Veja um exemplo:

@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
.image {
@mixin size(200px, 300px);
}

Os mixins são especialmente úteis para tratar questões de compatibilidade entre navegadores web:

@defmixin gradient(POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {
background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);               /* Chrome 10+,Safari 5.1+ */
/* @alternate */ background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */
/* @alternate */ background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);  /* IE10 */
/* @alternate */ background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);   /* Opera 11.10+ */
}
.header {
@mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);
}

O código acima gera o seguinte resultado:

.header {
background-color: #f07575;
background-image: -webkit-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -moz-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -ms-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -o-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
}
 

O Closure Stylesheets também pode ser usado para concatenar vários arquivos CSS em um só e fazer a minificação do código. A ferramenta faz verificações estáticas na sintaxe e é capaz de inverter valores em expressões (RTL flipping), além de renomear classes.

O Closure Tools, o projeto principal que contém o Closure Stylesheets, traz um compilador, uma biblioteca e templates para a manipulação de grandes aplicações JavaScript. As ferramentas são usadas internamente pelo Google, em produtos como GMail, Google Docs e Google Maps. O projeto foi tornado open source em 2009.

Fonte: Abel Avram/traduzido por Leonardo Galvão/InfoQ