Novo Blog desenvolvido pela CSS Padrões

Mais um blog desenvolvido pela CSS Padrões. O Leilão Negócios Online é um blog especializado em auxiliar vendedores de Sites de Leilões e também pessoas que queiram iniciar seu Negócio Próprio.
Se você está desempregado, ganha pouco no seu emprego ou está procurando alternativas para ganhar dinheiro em maior volume, visite o Blog.
Com texto muito explicativo de:

• Como se deve começar o Negócio


• Onde encontrar produtos


• Como calcular Preço de Venda


• Como administrar seu Negócio

Confira o Blog e de um novo rumo em sua vida.

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

Projeto Revenda Leilão em Magento - E-commerce

Depois de algumas semanas sem postar no blog, volto com mais um projeto em conjunto com Magento Desvendado.
Revenda Leilão é uma Loja Virtual para revendedores de produtos em sites e-commerce. Uma grande sacada do seu proprietário, já que, a maioria dos vendedores deste genero procuram fornecedores fora do Brasil.
O projeto do Layout foi desenvolvido pela CSS Padrões sobre uma Grid de 958px com espaçamentos de 6px.
O código e inclusões de modulos ficou a cargo da Magento Desvendado, que tambem faz parte do Grupo da CP.
Com certeza um trabalho, que ainda não está de todo pronto, mas que nos orgulha imensamente.

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

Títulos personalizados e amigos do Google

Muitos designer tentam estilizar os títulos com recursos que não são amigos do Google. Um dos recursos usados, frequentemente, é o SIRF, que usa uma substituição de imagens através do JavaScript.
Sabemos que o Google não indexa JavaScript, e por este motivo, quem usa este recurso corre o risco de ser punido pelo Buscador.
Irei explicar no exemplo de hoje, como criar títulos com estilo bonito e que são reconhecidos pelo Google. Apenas iremos usar XHTML, CSS e 2 imagens.

Primeiro vamos criar o código XHTML passo a passo:

<div class="passo1">

<h1>Título Estilizado</h1>

</div>


Aqui temos os elemento de classe "passo1 e o elemento h1.
Está é a unica marcação necessária para nosso exemplo.

Vamos escrever a CSS para fazermos o efeito desejado:

h1 {
font: bold 120px/120px Arial, sans-serif;
color: #ccc;
}

.passo1 h1 {
border-bottom: 30px solid red;
line-height: 81px;
letter-spacing: -10px;
background: url(images/missing-splat.png) 0 0 no-repeat;
}

O elemento h1 está configurado para ter uma fonte em negrito com tamanho bastante grande e cor cinza.

A classe passo1 h1 colocamos uma borda abaixo solida de 30px em vermelho.

line-height está com 81px para que a bordar abaixo fique sob a letras e por trás delas. A fonte do texto é 120px menos 81px fica 29px. Isso dá o efeito da borda sob as letras.

letter-spacing: -10px reduz o espaçamento entre as letras para que o efeito fique como desejado.

Colocamos a imagem splash atrás das letras e não há repetição pois a imagem é grande o suficiente para expansão, caso haja.

Até agora usamos uma imagem apenas e já temos um efeito interessante, mas vamos a segunda imagem.

.passo1 {
background: url(images/missing-halftone.png);
}

passo1 está atrás de passo1 h1. Por isso colocamos uma imagem neste nível para dar um efeito todo especial. A imagem se repete horizontalmente preenchendo todo o Título.

Resultado final:


Espero que tenham gostado do tuto e caso usarem em seus projetos comente aqui!

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

Grid em ação em um novo projeto

Sempre é bom ter várias opções de ferramentas para construir um Layout para grandes projetos.
Como criar grids já foi descrito em artigos passados aqui no Blog. Recomendo que leiam outra vez para entender como desenvolver seus próprios Grids.
O projeto aqui é o rascunho que foi mostrado ao cliente. Então terá algumas fotos fictícias e quadros para fotos de projetos do cliente.

Dados do site do cliente:

• Ramos de Negócio: Marcenaria artesanal


• Site institucional da empresa


• Galeria de fotos de projetos passados e futuros

Clique na imagem para ampliar
Após analizarmos o objetivo do cliente foi elaborado o Layout.
Uma dica importante: Nem sempre o primeiro Layout é aprovado, porém, com a ajuda das Grids tenho notado que a recusa do primeiro Layout, tem diminuído bastante.
Explicação para isso é:

• Grids nos dá uma visão mais elaborada do tema


• Começar o projeto com um Grid facilita a programação, assim, evitando erros básicos


• Olhar para um Grid nos faz desenvolver um tema com mais criatividade

Clique na imagem para ampliar
Lógico que tudo depende também do cliente nos passar uma idéia clara e objetiva de como gostaria de aparecer na Internet.

Nossa grid foi construida a partir de medidas das imagens menores. Cada coluna tem 70px com espaçamento de 10px entre elas.

Para cada projeto, cada necessidade do cliente, sempre criaremos uma grid que faça o trabalho para nós.

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

CSS Padrões está qualificada para a plataforma MAGENTO

Durante muito tempo, quando se falava em Loja Virtual o primeiro nome que viria à cabeça era OS-COMMERCE.
Um ótimo sistema de loja online, sem dúvidas, mas agora existe o Magento. Uma plataforma modular com muitos recursos para uma loja realmente profissional.
A CssPadrões está qualificada para confecção de Layout/Templates, configuração e instalação desta plataforma.
Em breve aqui no blog será postados artigos dos trabalhos que estão sendo realizados neste mês que entra.
Ao todo estamos trabalhando em 4 projetos de lojas de clientes, que querem entrar no mundo das vendas online de forma profissional.
O primeiro projeto, que ainda está em fase de implatação e desenho, é a Boutique CAZO.
Uma características de nossas lojas são:

• Layouts totalmente diferenciados


• Manutenção total ao cliente


• Aprendizado de como operar a loja com o próprio programador


• Preços que cabem para qualquer bolso

Em artigos futuros mais informações.

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

Entrevista para WhoHub

Estou ficando chique. Acabei de ser entrevistado pelo Site WhoHub.
Para ver a entrevista visite a página da entrevista com Marcelo da CSS Padrões.

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

Usando uma Grid Gráfica efetivamente

As Grids economizam tempo e stress na hora de conceber um projeto. Projetos como, lojas virtuais, blogs e sites complexos, tendem a tomar muitos meses para confecção, mas com uso de grids o tempo é reduzido em 50%.

Grids nos dão uma visão geral de espaçamentos, margens e divs que devemos criar. Muitos pensam que o desenvolvimento de um projeto começa com o código XHTML ou CSS.
O processo todo começa com um Winframe, que seria o desenho do site em um editor de imagens.
O editor de imagem nos da a capacidade de trabalhar por camadas, então a Grid pode ficar na camada mais baixa e assim podemos colocar os elementos em cima dela.
Vamos analizar este projeto que fiz para um cliente.

 Os elementos principais de uma Loja Virtual são as promoções e produtos. A grid foi elaborada em cima desses itens.

• Na parte de baixo, perto do Footer existem caixas para 4 produtos e uma caixa que pega 2 unidades para a newslleter.
• A partir daí a grid que tem unidades de 152px e espaçamento de 6px, conseguimos estilizar o menu no topo com harmonia.
• Além disso a regra dos terços, usada muito em fotografia, foi utilizada para dar equilíbrio no Layout.
• Fazendo as somas de unidades nossa grid ficou com largura de 954px com unidades de 152px e espaçamentos de 6px.
• Abaixo do banner temos um div que contém 3 blocos de 310px que farão referências e promoções, novidade e cadastramento de revendedores. Veja que com a grid fica mais fácil de saber quais divs devem ser criadas e em que tamanho.
• O full_banner está incompleto de propósito para este artigo para que vocês possam ver, que com a grid, a visão de onde colocar, textos e imagens, fica mais clara.

Está é a forma que se usa Grids para grandes projetos ou para projetos pequenos.
Vocês devem ter entendido o uso das Grids já nos primeiros artigos, pois não houve muitas perguntas e nem dúvidas.
Usem grids e bom trabalho!

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

Como criar suas próprias grids - números mágicos

Estive fora esses dias,mas estou de volta para dar continuidade ao tema Grids. Hoje vamos aprender a criar nossas próprias grids.
Existem algun números mágicos que ajudam na criação de grids. Opiniões variam sobre esses números.
Uns usam colunas que variam de 24 a 30px, com um espaço de 10 pixels entre elas.
Se quiser criar sites ou blogs sobre grids você terá que encontrar sua própria fórmula
Eu particularmente uso sempre espaços em número ímpares. Vou explicar porque:

É mais fácil colocar uma linha divisória em um espaço impar, do que em um espaço de 10 px.

Uso uma fórmula matemática para criar as grids que preciso

Grid ((número de colunas - 1) X espaço em pixel) / números de colunas = Grid


950 ((16-1) X 10) / 16= Unidade

Vamos começar a criar uma grid em cima de um bloco do Adsense de 336 x 200.

Com uma coluna de 340px já poderemos dar nosso ponta pé inicial.
Divida a coluna com unidades de 165px e com espaçamento de 10px:

(340-10) / 2 = 165px

 

Lembre-se que a tela do computador em resolulão de 1024x768 geralmente oculpa entre 974px por 750px, então está grid no total teria 8 unidades de 110px totalizando uma grid de 950px.

 

Está grid para meus projetos não está boa pois tem poucas unidades. Se eu quiser criar um template com três colunas, por exemplo, já não daria.

Vamos então, fazer alguns ajustes na grid até conseguirmos um resultado satisfatório.

Subdivida cada coluna para chegarmos a um grid melhor. Vamos dividas em 16 unidades com 50px cada.

 

Agora sim já está melhor e posso dividi-la em  2 partes ou 3 partes:

 

 Ou então com uma coluna estreita do lado esquerdo para publicidade menores:

 

Realmente Grids são ótimas para começarmos projetos. Pense nisso:

É bem melhor começar um projeto com uma grid de fundo. Começar um projeto com uma tela toda em branco, muitas vezes, é desanimador.

Bom, espero que tenham entendido o uso das grids e como criá-las, caso não, faça seus comentários que responderei com prazer.

Abraços!

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

Blog como fonte inteligente de marketing

Depois de algum tempo de recesso, volto a escrever aqui no CSS Padrões para retomarmos os nossos diálogos sobre os benefícios que um blog corporativo pode trazer para a sua empresa. Hoje busquei como referência o blogueiro espanhol Sergio Monge.

Monge listou uma série de situações benéficas para as empresas criadas a partir da manutenção de um blog bem elaborado e sempre atualizado com assuntos interessantes. Ele ensina, por exemplo, que manter um blog significa manter-se em dia [atualizado]”.

Tornei-me um entusiasta apaixonado da mídia blog. Para ser mais enfático, tenho assumido uma postura "evangelizadora” [expressão cunhada pelo blogueiro Jeremy Wright], no sentido de tentar fazer com que mais pessoas criem seus blogs e façam dele uma forma inteligente de comunicação que lhes possibilite usufruir da melhor maneira possível do seu potencial quer seja do ponto de vista pessoal quer seja profissional.

Mas, ainda conforme Sergio Monge, não se pode pensar em manter um blog sem assumir uma postura proativa. “Un blogger necesita fuentes para ser capaz de escribir contenidos interesantes y, para ello, lee lo que escriben otros blogger, revisa estudios sobre el sector, asiste a conferencias y congresos y, sobre todo, se mantiene despierto”, diz ele.

Ou seja, é preciso buscar entender o fucionamento dessa mídia e se “esforçar” para manter uma rede de contatos ou fontes que possa resultar na elaboração de conteúdos interessantes e que tragam algum resultado ou ensinamento para o leitor ou para os clientes da empresa/corporação.

O blogueiro espanhol afirma que para uma empresa ter um grupo de pessoas da corporação que dedicam uma parte do seu tempo a escrever no blog da organização pode resultar na melhor fonte de inteligência de marketing. Mas para isso é preciso que os responsáveis por esta tarefa leiam outros blogs e se informem das novidades por meio essa mídia fantástica.

Transferindo esse ensinamento para outro foco, eu tenho dito aos meus alunos nas minhas aulas de Jornalismo Digital que um blog pode funcionar ao mesmo tempo como um laboratório e uma vitrina para que eles possam desenvovler e mostrar as suas habilidades com a escrita e o jornalismo como um todo.

Para as empresas o resultado e a melhoria do marketing, pois os clientes e colaboradores vão perceber que a corporação conta no “seu time” com pessoas que acreditam na empresa e se propõem a colaborar para o seu crescimento. Quando isso acontece, a organização poderá comemorar em pouco tempo os frutos dessa participação, que virá na forma de uma imagem positiva no mercado.

Por hoje é só. Volto logo em breve.

PS - Esse artigo nasceu a partir da leitura deste post.
PS 1 – Para outros diálogos, acesse o blog Política com Pimenta.

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

Entendendo um pouco mais sobre as Grids

Antes de fazer uso das Grids, temos que estabelecer algumas constantes. A primeira será a resolução de tela que nossos visitantes mais usam. Isso é conseguido pelo Analytics, ou ou programa de estatísticas de site.

Resolução de Tela
A maioria hoje em dia usa uma resolução de 1034 x 768. A apresentação das informações, geralmente ocupam, em um browser, 974 x 650 até a quebra de linha (quebra de linha seria o fim da tela do computador).


Então, um layout com dimensões de 960px seria o mais adequado.


Anúncios
Outra constante que deve ser avaliada, são os anúncios do Adsense. O maior bloco de anúncio seria a Caixa Grande de 336 x 280. Trabalhando com medidas em cima deste bloco, já otimizamos espaços para outros, como, o de 300 x 250.


Com medidas em cima deste bloco os outros anúncios estão com espaços garantidos.


Unidades e Colunas
As Grids são compostas de unidades e colunas uniformes que darão sustentação ao Designer do site.


A Grid
Em geral sempre estabelecemos unidades em multiplos de 3 ou 4. Por exempo 6, 8, 12, 14, etc.


Veja um Grid com 3 colunas e cada coluna com 4 unidades.


Grid com 2 colunas com 6 unidades.


Grid com 4 colunas com 3 unidades.


Grid com 6 colunas com 2 unidades.



As variações e combinações são diversas, mas vendo estes exemplos, já se pode ter uma idéia de como podemos criar vários layouts em cima de um grid.

Não fique preocupado(a) se não entender, ainda, para que serve as Grids. Em posts futuro verá que são muito práticas.

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

Grids, padronização de margens e paddings

Criar templates, sejam eles para Blogger, Sites estáticos, E-commerce, necesssitam de um método matemático para que o trabalho seja produtivo e de resultado agradável.
Cada Designer desenvolve de uma forma diferente. Alguns, calculam margens e paddings de cabeça. Outros (a maioria), nem calculam, vão na base do erro e acerto.
Existem vários métodos, mas, o metódo que eu uso e recomendo, é o uso de uma Grid.
Para alguns designer, isso pode ser uma declaração de arrepiar os cabelos. Alguns dirão, que a Grid limita o processo criativo, outros dirão que a Grid estabele muitas regras rígidas.
Na minha experiência, nenhuma, das duas opções citadas, acontecem. A grid simplesmente nos dá informações precisa de posicionamento, números para tamanhos e espaçamento.
Com o uso de uma Grid bem elaborada, o processo de desenvolvimento acelera em 50%, ou mais. Os blocos de informações em um site, são planejados para que a informação, seja atraente para o leitor.

Acima vemos um exemplo de Grid, feito com uma imagem. Em artigos futuros, iremos ensinar a criar sua própria Grid com tamanhos diversos.

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

Widgets e Gagets sem mistérios Desvendado

Antes falarmos em Widgets/Gagets precisamos entender como funcionam as coisas dentro do Blogger.
Marcação XHTML sempre será igual em um documento PHP,ASP, ColdFusion, Ruby ou outro qualquer. Para qualquer um entender isso, lógico que irá precisar ter uma noção boa de XHTML.

A mesma regra serve para CSS (Folhas de Estilo). Se você tem noção sobre CSS, verá que qualquer código que a utilize será identificado pelo começo de código <div id="algumacoisa"> </div> ou <div class="algumacoisa"> </div>. Essas marcações indicam um bloco que pode ser um elemento com id único ou uma classe que pode se repetir pela página várias vezes.

Se for em seu código do Blogger em HTML/Expandir Modelos de Widgets, verá que todo código, principalmente da Sidebar- Wrapper, irão conter essas marcações.
Fora isso, também deverá atentar para marcações nativas do XHTML como: h2, p, a, ul, li entre outros.
Exemplo do Widgets Links Recomendados que está em uma Sidebar qualquer:



Observe que existe um id='LinkList1 que identifica este elemento como único. Ele não pode se repetir na página pois contém um id e não uma classe.
Logo em seguida entram código interno do Blogger, mas quero que atentem apenas nos elementos XHTML e CSS. Vamos aos elementos que ele contém para que possa ser estilizado:

Elementos CSS: id='LinkList1'(elemento pai), id='main' e class='widget-content'

Elementos XHTML: h2, ul e um li com elemento (a dos links) que está sendo carregado através de um loop em php.

Sendo assim eu poderia escrever apenas um código CSS para estilizar este Widgets apontado algo como:



E assim estilizaria também o li, a e outros elementos XHTML que ele contivesse. Sabendo os elementos distintos de um widgets você pode colocar imagens ao lado dos links usando códigos CSS que já foram explicados em vários tutorias espalhados pela Internet, como também, colocar cor de fundo entre outras coisas.

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

Nunca participei de memes mas 2009 é um novo ano

Como já disse em fóruns e até em alguns comentários em blog, nunca o CSSPadrões participou de "memes". Como é um novo ano, uma nova atitude e um novo foco para mim, resolvi aderir a este, pois o tema é muito interessante e útil.
O meme foi criado pelo Marcos Lemos dos Ferramentas Blog e o tema é: Blogs que ajudam a Blogar.
A idéia e indicar 5 blogs que de alguma forma ajudam blogueiros iniciantes e veteranos a deixarem suas páginas mais criativas e com mais usabilidade. Neste meme também teve participação o Alberto do Mestre Blogger.
Os 5 blogs que indico são:

Blogsfera - Tudo sobre widgets e truques para blogger
Fique Rico - Quer ser profissional blogger, leia este blog
Ava7pattner - Quer fundos lindos para blog ou site, está tudo aqui
Mestre Seo - Tudo sobre otimização de sites.
Usuário Compulsivo - Aqui tem tudo e muito mais!

Repasso este meme para:

Politica com Pimenta
Gem@Blog
Malcomtux Blog
Blog do Xavier
Mais Atitude

Repassado para mim pelo Templates Para Novo Blogger

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

Como estilizar um widget em particular

Vamos tratar aqui de Widgets a pedido de um leitor. Para começarmos temos que entender onde estão os widgets no código XHTML. Por regra do Blogger os widgets ficam principalmente no id SideBar-Wrapper, mas podem estar em qualquer lugar em um Blog dependendo de quem criou o template.
Todo Widget tem um padrão de ínicio de código:

<b:widget id='HTML5' locked='false' title='Visitas Recentes' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

Vendo o código vemos como podemos seta-los na folha de estilo. Temos um id que neste exemplo é HTML5, temos um elemento H2 que também é uma classe, logo em seguida temos uma condição if que determina dentro de um loop que se condição igual a data do título então deve mostrar a data e por fim temos uma classe widget-content.

Para formata-la do jeito que desejar terá apenas que estilizar estes elementos conforme seu gosto. Antes de qualquer formatação que você faça será interessante estudar cada widget e seu código em um blog teste até você se familiarizar com cada um para poder fazer alterações mais extravagante.

Em próximo artigo vamos estilizar o widgets Links recomendados para todos terem uma idéia exata de como fazer.

Bom estudo

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

Notícias Blogosfera será lançado dia 15 de janeiro

Dia 15 de janeiro de 2009 lançamento do mais novo projeto da CSS Padrões. 
Notícias Blogosfera será e já é um Blog de Notícias do Mundo dos Blogs e Sites que fazem a diferença ou não.
Blogs com nomes já consagrados estão entre os primeiros artigos que serão publicados no dia do lançamento. Destaque para entrevista com Ariane do Templates para Novo Blogger que será vínculada no dia 15.
Entre tantos talentos da Blogosfera, também terá notícias de pessoas menos famosas, mas que de alguma forma se destacam na rede, seja com textos de qualidades, textos de péssima também, que sejam engraçado, ou chato, que seja poéticos ou que seja sarcásticos.
Tudo que for notícia relevante ao mundo dos Blogs e Sites estará lá.

Não percam a estréa.

E para os Blogs que divulgarem o Notícias Blogosfera e levar um número relevante de leitores, ganhará um template totalmente personalizado pela CSS Padrões.
Para isso é preciso escrever um artigo apontando para este artigo e um link apontando para o Notícias Blogosfera. O Blog só estará disponível no dia 15 de janeiro.
Os acessos serão rastreados através do Google Analytics.
Os artigos podem ser publicados a partir de hoje e o resultado será divulgado no final do mês de Janeiro aqui no CSS Padrões.

Então divulguem e visitem no dia 15, Notícias Blogosfera.

Subscreva o CSS-Desvendado completo!

Subscreva CSS - Desvendado por Email

O valor dos comentários em um blog

Olá, estou de volta como um novo assunto para dividir com vocês. Hoje vou falar sobre o cuidado e o respeito que um blogueiro - independente da finalidade ou interesses com que mantém o blog - deve ter para com os comentários adicionados à sua página.

O diálogo proporcionado pelos comentários, a comunidade que se forma em decorrência deles, a troca de idéias, as discussões travadas consistem no espírito da atividade blogueira. Blogar é construir relacionamentos. Foi a partir dos blogs que surgiram as redes sociais na internet.

Um exemplo simples do que estou dizendo é o post A força dos blogs na Internet, postado aqui no CSS Padrões. Quantos comentários ele atraiu! Que discussão bacana sobre o potencial dos blogs! E o que é melhor, tudo de forma voluntária. Quem tem o hábito de ler blog o faz por que gosta de participar de discussões. É essa força que os blogs têm e que falta às outras mídias.

Quanto aos blogs corporativos, estes é que não podem mesmo desprezar os comentários. No momento em que um CEO resove crair um blog para a sua empresa ou permite que funcionários mantenham um blog para falar sobre questões da corporação, é preciso dar toda a atenção que essa mídia requer. É um erro de estratégia criar um blog para a empresa e deixá-lo abandonado.

É preciso que o blog seja encarado com responsabilidade, pois muitos clientes e colaboradores da empresa vão usar o sistema de comentários do blog como principal meio para manter contato com a direção da empresa, substituindo mesmo o uso do email. E será nos comentários que virão as críticas, sugestões, reclamações, contribuições. Enfim, será através do blog que ocorrerá parte importante da comunicação empresa/cliente.

Logo, manter um blog não é mais brincadeira de adolescente. O tempo em que essa mídia era usada para miguxês, como diz o Carlos Cardoso, já vai longe. Blog agora é coisa séria. Se você não estiver disposto a levar a "coisa" com seriedade, melhor não começar. Seriedade, no entanto, não quer dizer sisudez. Um blog deve ser bem escrito, atraente e alegre. Pense nisso.

PS - podemos nos encontrar para outros diálogos aqui e aqui.

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