CSS Padrões - CSS Desvendado

Twitter altera relacionamentos em rede e influi nos processos de comunicação

mrs5h@yahoo.com.br (Luiz Valério e Sélida Valério) — Wed, 23 Dec 2009 18:05:00 +0000

Se a palavra blog foi a grande sensação de 2008, a mais escrita, a mais falada, a mais digitada, a mais buscada, neste 2009 que está dando seus últimos suspiros a expressão da moda na web e fora dela foi Twitter. A mídia analógica e eletrônica se rendeu ao site de microblogs. Jornais, revistas, editoras de livros e emissoras de televisão dedicaram páginas e mais páginas, matérias e mais matérias, minutos e mais minutos sobre o fenômeno que levou milhões de pessoas em todo o mundo a se comunicar com mensagens diversas em apenas 140 caracteres.

No Brasil, assim como aconteceu com o Orkut, o Twitter virou febre e ganhou a adesão de adolescentes, jornalistas, publicitários, jogadores e técnicos de futebol, celebridades, CEOs, empresários e políticos. Os discussões ganharam aspecto telegráfico e uma multidão de pessoas passaram a murmurar – e às vezes gritar – seus comunicados no site de microblog. Mas como aconteceu com os blogs, ainda há uma parcela de usuários de internet que tem um certo ranço em relação ao fenômeno que agitou as redes sociais na web neste ano.

Provavelmente, uma nova onda cibernética surgirá em 2010, mas o Twitter pode ser considerado o grande fenômeno da web nessa década que está prestes a se findar. Tando assim que muito profetas cibernéticos chegaram a decretar o fim da “era blogger” devido ao sucesso estrondoso do site de microblog. Mas o que resta evidente de todo esse sucesso do Twitter é que muitas usuários desta rede social ou twitters, como estes são conhecidos na web, ainda precisam aprender a usar todo o potencial desta valiosa rede de contatos que é o Twitter.

O site de microblogs pode ajudar a posicionar uma marca no mercado, fidelizar clientes, turbinar ou arruinar carreiras, dependendo do uso que se faz dele ou da competência de quem resolve as mensagens telegráficas de 140 caracteres. Estudos acadêmicos e livros começaram a pipocar no mercado sobre os usos otimizadores podemos fazer do Twitter. Probloggers despejam enxurradas de posts sobre como bem utilizar a ferramenta para fins de marketing pessoal, profissional ou empresarial. É preciso saber com qual foco e com que finalidade se vai usar o Twitter. Usar por usar sem saber direito o porquê e como fazer é apenas ampliar a gritaria cibernética que para nada contribui.

Assim como aconteceu com os blogs num passado bem recente, mas que nessa era digital parece ter sido há décadas, a discussão é se o uso do Twitter por jornalistas consiste em jornalismo ou não. Eu digo que sim e que não, a depender de como se usa o poder dos 140 caracteres. Como blogueiros conseguiram construir credibilidade a partir de suas páginas pessoas e serem buscados por empresas de comunicação para atuarem como colunistas, há na Twitosfera um grande número de twitters que conseguem construir uma boa reputação com credibilidade, arrebatando muitos seguidores que querem saber o que ele tem a informar naquele dia, naquele momento.

Logo, para se dar bem no Twitter, assim como em qualquer plataforma de comunicação que se faça uso, é preciso produzir conteúdo de relevância, algo que seja útil para os internautas. O Twitter funciona como um espécie de agregador de notícias, com a diferença de que o usuário pode escolher quais “comunicadores” e quais conteúdos vai receber em sua “caixa de mensagem”. Do ponto de vista do marketing, muitas empresas já entenderam o espírito da coisa e estão fazendo bom uso do site de microblog.

2010 será um ano em que novos usos e aplicações poderão surgir para o Twitter. A empresa Twitter está se reestruturando para acompanhar o crescimento estrondoso que o servido alcançou em escala mundial. O que o Twitter nos reservará para os próximo 360 dias? Só vivendo para ver. Apenas uma coisa é certa: o mundo da comunicação já profundamente alterado pelos blogs definitivamente nunca mais será o mesmo depois do Twitter.

Blogueiro, Especialista em Comunicação Social e Novas Tecnologias e consultor em Marketing em Redes Sociais. Blog do autor: http://luizvalerio.com.br Email: luiz.valerio.silva@gmail.com Twitter: http://tuitter.com/valerio34

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

Portifólio da CSS mini-sites para produtos

mrs5h@yahoo.com.br (Marcelo R. Souza) — Thu, 08 Oct 2009 11:43:00 +0000

Apesar de não postar frequentemente aqui no CSS Padrões, estamos a todo vapor.
Além de estarmos na produção de várias lojas virtuais, blogs e sites, estamos também com uma demanda por Mini-Sites para Produtos.
Você não sabe que seja um Mini-Site para Produtos? Não se preocupe pois lançaremos um artigo sobre o assunto muito em breve.
Por enquanto de uma olhada em nosso portifólio para ter uma idéia do que seja

Celulares com TV Analógica - Mini Site do T1000 da Vaic

Carregador Universal - Mini Site do Carregador Universal

Temos muito mais em produção e outros no ar em teste ainda, quando tudo estiver finalizado postaremos aqui para que possam dar suas avaliações.

Obrigado e até a próxima!

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

Sua marca é muito importante. LogoTipo Profissional

mrs5h@yahoo.com.br (Marcelo R. Souza) — Wed, 22 Jul 2009 20:51:00 +0000

Ter seu negócio online deve ser de suma importância para quem é um empreendedor.
Em artigo anterior apresentamos a Loja Virtual Revenda Leilão Online, criada pela Css Padrões junto com o Magento Desvendado.
Como primamos pelo perfeito funcionamento e designer da loja não poderiamos deixar o Logotipo da Loja em desacordo com o todo. Para isso, precisamos de valores humanos em certas áreas especificas.
Os Blogs em que sempre estamos dando uma olhada para avaliação de layouts ou para deixarmos um comentário, nos ajudaram a encontrar a pessoa certa para desenvolver esse trabalho de suma importância.
Depois de apreciar, o espetacular trabalho de Johnny Rox, na preparação e tratamento das imagens em The Lord of the Links parte 1 - A Sociedade do Manoel, não tivemos dúvida em convida-lo a realizar o Logo Tipo da Revenda Leilões e de outros trabalhos que publicaremos aqui.
Veja o primeiro Logotipo:

E veja agora como ficou com o toque, todo especial de Johnny Rox:

Belo trabalho!

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

Novo Blog desenvolvido pela CSS Padrões

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sat, 13 Jun 2009 12:34:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sun, 24 May 2009 20:46:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Mon, 06 Apr 2009 10:01:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Wed, 04 Mar 2009 13:06:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sat, 28 Feb 2009 23:30:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Wed, 18 Feb 2009 21:14:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Tue, 17 Feb 2009 12:22:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Tue, 10 Feb 2009 10:30:00 +0000

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

mrs5h@yahoo.com.br (Luiz Valério e Sélida Valério) — Mon, 09 Feb 2009 19:37:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Tue, 27 Jan 2009 10:13:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Mon, 26 Jan 2009 09:48:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sun, 18 Jan 2009 21:21:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Thu, 15 Jan 2009 14:17:00 +0000

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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Tue, 13 Jan 2009 03:12:00 +0000

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'>

<b:if cond='data:title != ""'>
<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

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sat, 10 Jan 2009 22:20:00 +0000

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

mrs5h@yahoo.com.br (Luiz Valério e Sélida Valério) — Fri, 09 Jan 2009 21:50:00 +0000

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

O blog corporativo e o diálogo com os clientes

mrs5h@yahoo.com.br (Luiz Valério e Sélida Valério) — Tue, 06 Jan 2009 21:00:00 +0000

O uso de blogs corporativos tem crescido bastante no Brasil. Recentemente fiz uma entrevista com o escritor e consultor de blogs brasileiro, Fábio Cipriane, a respeito desse tema e ele me dizia que quando lançou a primeira edição do livro Blog Corporativo tinha conhecimento de apenas 4 ou 5 blogs corporativos.

Ele relatou que, desde então, esse número aumentou consideravelmente e que, nos seus arquivos, já tem uma lista na qual constam mais de 280 blogs de pequenas, médias e grandes empresas. Do dia em que publiquei esta entrevista no blog Verbalize! para hoje, certamente este número já cresceu mais ainda.

E eu me pergunto: porque alguns executivos ainda não aderiram à essa nova forma de relacionamento com os clientes da sua empresa? Claro que nem toda empresa está preparada para manter manter um blog, mas buscar se inserir nste universo é algo do qual não se pode abrir mão.

No mais, contrata-se um consultor para cuidar dessa parte do negócio, preparando o executivo responsável pelo blog ou mesmo a equipe que for designada para manter a página atualizada. Um blog de uma empresa, quer seja mantido pelo CEO da companhia quer seja mantido por um funcionário ou uma equipe deles pode trazer resultados benéficos para qualquer negócio.

Mas, para isso, é preciso estar disposto a assumir uma atitude de parceria e honestidade para com a clientela da empresa. Não se pode pensar em tratar o cliente como mero consumidor, conforme ensina Jeremy Wright. Como já escrevi em artigo anterior, um blog corporativo, pode levá-lo a saber o que os clientes estão pensando da sua empresa e, dessa forma, possibilitar que este parceiro seja atendido a contento.

Por outro lado, ao decidir criar um blog para sua empresa, não faça dele um instrumento de marketing pura e simplesmente. Naturalmente, por sua própria característica, o blog já faz esse papel. Um blog deve ser usado para dialogar com os clientes. Você pode falar sim dos seus produtos, mas sem parecer estar querendo convencer seu cliente a consumir.

Uma forma de fazer isso é relatando casos de sucesso de determinados produtos ou campanhas, de forma a fazer o cliente se sentir um confidente, um amigo, um parceiro. Alguém cuja opinião é importante. É preciso dar a devida atenção aos comentários feitos no blog, respondendo a cada um deles. Principalmente os negativos.

Ainda na entrevista que fiz com Fábio Cipriane, ele citava uma série de benefícios que um blog pode trazer para uma empresa, tais como: promover um produto ou receber ajuda para desenvolver novos produtos; propiciar que CEOs atuem como líderes de tendências, experts no assunto; projetar imagem da empresa; servir de fonte de informação, invertendo a relação Empresa-Imprensa; humanizar a empresa dando maior transparência; melhorar o relacionamento com seus clientes; promover sua marca; explorar nichos; aumentar o tráfego de seu website; quebrar barreiras de comunicação; mudar opinião pública; gerir crises; e recrutar funcionários.

Por ser de fácil manutenção e atualização, um blog custa muito pouco para uma empresa, se levados em consideração os resultados fantásticos que ele pode render. Mas, para isso, será preciso que o executivo que decidar implementar um blog da empresa que dirige ou permitir que uma equipe de funcionários o faça, mude de atitude e esteja aberto a críticas. Elas virão, com certeza. Mas será uma oportunidade de correção de rumos.

Aliás, nessa nova relação de mão dupla dos tempos modernos, em que os clientes querem e podem se expresssar sobre os produtos que adquirem, manter um blog é a melhor forma de catalizar as possíveis críticas feitas à sua empresa e tentar corrigir o que estiver errado. Pense nisso.

Se quiser ler sobre política vá até meu outro blog.

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

Elemento post o mais importante no Blogger

mrs5h@yahoo.com.br (Marcelo R. Souza) — Mon, 05 Jan 2009 15:06:00 +0000

A parte que abriga os post de todo blog é com certeza a parte mais importante de todo projeto.
Através dela nossos leitores aprendem, se divertem, ficam sabendo do que está acontecendo. Sendo assim vamos dar uma atenção para ela.
Antes de começar a codificar as postagens, você tem que ter em mente que, está parte tem que ter todo cuidado.
Primeiro padronize como ela será, seja no papel ou em sua cabeça, mas ela terá que ser agradável e ter um equilibrio, principalmente se forem textos enormes ou tutoriais. Crie um padrão para tamanhos de imagens, espaços entre parágrafos, lista simples e outros elementos.

Vamos começar:

A classe .post abriga os elementos de uma postagem. Sendo uma classe ela se torna um elemento filho de da div main-wrapper que configuramos em tutoriais anteriores com uma largura de 417px.
Veja o código CSS do nosso exemplo:

.post {
width:377px;
margin: 0 0 0 20px;
background: url(http://i37.tinypic.com/1z3z59x.jpg) no-repeat center bottom;
padding-bottom: 20px;
text-indent : 25px;
text-align : justify;
font-size:12px;
}

A largura de 377px para o post nos da uma sobra de 40px em relação a div main-wrapper.
Sendo assim, colocamos uma margem a esquerda (left) de 20px, o que centralizará nossa classe.
Colocamos uma imagem abaixo em vez de uma borda, para ficar mais bonito.
Demos um espaçamento de 20px abaixo do post para separar os links de comentários nome do autor, etc.
Text-indent é um recuo do primeiro parágrafo, que também serve para estilo de beleza.
Justificamos o texto para dar equilibrio na classe e definimos o tamanho da fonte em 12 px.

Todo post tem um título com um elemento h3. Se h3 está dentro da classe .post, então ele é filho deste elemento.
Vamos referencia-lo

.post h3 {
margin : 18px 0 10px;
font-size : 18px;
font-weight : normal;
font-style : italic;
letter-spacing : -1px;
text-align : center;
}

Demos uma margem em cima para dar espaço entre a imagem de sombreamento e demos uma margem embaixo para separar do texto da postagem.
Definimos o tamanho da fonte em 18px;
Estilo da fonte foi declarada em normal e ítalica (deitada)
Os espaços entre as letras do título foi declarada em 1px para dar equilibrio para fonte Georgia.
Colocamos o título no centro da classe .post.

Como o título é um link, vamos estilizar seus estados quando o mouse está por cima, quando é visitado, etc.

.post h3 a, .post h3 a:visited, .post h3 strong {
text-decoration:none;
border:none;
color:#000;
font-weight:normal;
}

Sempre que puder generalizar vários elementos, faça. Isso economiza código e trabalho.
Este trecho não precisa de muita explicação pois utiliza uma css simples, mas veja que foram estilizados 3 elementos de uma vez. Sempre que puder faça isso.
Uma dica é que aqui você poderá colocar uma imagem de fundo nos títulos.

Como o elemento .post é vasto vamos ficar por aqui hoje e continuar no próximo artigo.

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

O que um blog pode fazer pela sua empresa ?

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sun, 04 Jan 2009 14:42:00 +0000

Quando uma empresa precisa ou quer saber o que a sua clientela pensa/fala a seu respeito ou mesmo quais os seus desejos, geralmente lança mão de pesquisas de mercado ou de opinião. Esse tipo de iniciativa tem um custo alto. Esse custo pode ser reduzido significativamente com o uso de um blog corporativo como canal de comunicação com os clientes, pois os comentários deixados por eles servem como um termômetro sobre como se relacionam com o seu empreendimento.
Conforme nos ensina Jeremy Wright, “uma das razões para que o blogging seja um fenômeno é que ele leva ferramentas como a pesquisa de mercado e o teste de produtos da visão panorâmica ao nível de interação interpessoal”.

Então, além de permitir essa possibilidade de saber o que os clientes esperam da sua empresa, o que pensam dela, como vêem os serviços que ela presta, o blog se constitui num importante canal de comunicação de mão dupla, pois permite um feedback todo especial, fazendo com que os clientes passem a se ver não apenas como consumidores, mas parceiros que estão sendo ouvidos. Dessa forma, a sua empresa só tem a ganhar.
O diálogo proporcionado pelos blogs entre empresa e cliente também gera outros benefícios que fazem a diferença para quem se propõe a fazer parte de universo revolucionário. Vejamos alguns:

1) o blog gera clientes evangelistas, ou seja, aqueles que vão falar bem da sua empresa de forma voluntária;

2) desperta a confiança por parte da clientela em relação ao seu negócio/empresa;

3) o blog ajuda a você se destacar como um líder de pensamento no setor em que atua;

4) através do blog você compartilha e obtém conhecimentos (aliás, essa é uma das grandes vantagens do blog);

5) utilizando o blog como instrumento de marketing e comunicação, você proporciona um feedback sobre os seus produtos;

6) o blog ainda revela novas oportunidades de crescimento e novos mercados para a sua empresa.

Texto escrito por Luis Valério - Politica com Pimenta

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

A força dos Blogs na Internet

mrs5h@yahoo.com.br (Marcelo R. Souza) — Sat, 03 Jan 2009 14:22:00 +0000

Blog é a mais inovadora ferramenta de comunicação e marketing surgida nos últimos anos. Em 2007 a palavra BLOG foi considerada pela revista TIME com a palavra do ano.
Muitas publicações sobre o assunto, como é o caso do livro Blog Marketing, de Jeremy Wright, têm destacado o potencial dessa nova mídia como instrumento de promoção de marcas e fidelização de clientes, além de se constituir também num importante elo que possibilita uma melhoria significativa na relação entre empresas e clientes.
Revistas de prestígio internacional como a Fortune e a BusinessWeek têm dado destaque ao assunto blog como o importante instrumento de marketing que ele é.
A mídia convencional se rendeu ao poder dos blogs e todo grande jornal, revista ou emissora de televisão tem o seu time de blogueiros/colunistas que buscam manter um diálogo diferenciado aos seus leitores/ouvintes/telespectadores. Por outro lado, empresas como a General Motors, a gigante da informática, Microsof, a Google, a Apple e tantas outras nacionais e internacionais utilizam a mídia blog para melhor se comunicar com clientes e funcionários.
O mundo das comunicações nunca mais foi e jamais será o mesmo depois do advento dos blogs. O fenômeno há muito se tornou objeto de estudo acadêmico e muitos são os artigos, teses e tratados que abordam o tema de forma apaixonante.
Por tudo isso, faz-se necessário que a sua empresa não perca a oportunidade de fazer parte dessa revolução que está mudando o mundo, conforme profetizou o blogueiro e jornalista americano Hugh Hewitt, autor do livro Blog – Entenda a revolução que vai mudar seu mundo.

Texto criado por Luiz Valério - Política com Pimenta

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

Ano Novo, vida nova, template novo e foco mais definido

mrs5h@yahoo.com.br (Marcelo R. Souza) — Mon, 29 Dec 2008 19:34:00 +0000

Natal e Fim de Ano nos remete a reflexâo, mesmo não querendo pensar no que passou e no que virá, é inevitável. Então resolvi rever certos pontos de vistas, certas atitudes e lógico, novos rumos para meu Blog.
Como vêem o Layout mudou radicalmente. Usei uma dica fantástica de Post em duas colunas, criado pela a Ariane do Templates Para Novo Blogger, e já deixo meu agradecimento pelo trabalho execente que está profissional faz.
Também estarei mais concentrado a escrever para empresas e pessoas que estão querendo fazer um trabalho mais profissional em relação a Blogs e Sites.
Nestes 5 meses de vida do CSS Padrões, estive mais focado nos Blogueiros, mas vendo o crescimento do Blog, graças a pessoas anônimas e algumas explícitas, resolvi profissionalizar mais os assuntos e também os serviços.

O Tutorial para construção de Templates para Blogger continuara e será, talvez os últimos artigos neste estilo.

Estes dias, antes das festas, estou envolvido com contratação de vendedores e a escritas de artigos, focados para este publico.

Dia 2 janeiro de 2009 estarei de volta de mais uma viagem e continuarei de onde paramos no Tutorial.

Para todos um Feliz Ano Novo.

Abraços!

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

Estilização, herança, especificidade são importantes

mrs5h@yahoo.com.br (Marcelo R. Souza) — Tue, 16 Dec 2008 10:27:00 +0000

Praticamente já deixamos nosso blog com um visual mais apurado e profissional com os tutoriais anteriores. Agora vamos dar estilos específicos aos elementes internos.
Esses elementos XHTML são: Títulos de widgets, data, títulos de post, etc.

Vamos começar de onde paramos:

No código CSS vá até o item /* Headings. É daqui que vamos começar e estilizar os títulos dos widgets

h2 {
margin:1.5em 0 .75em;
line-height: 1.4em;
font-family: Georgia;
text-transform:uppercase;
color:#000;
text-align:center;
font-weight : bold;
font-size:12px;

Este trecho defini praticamente todos os títulos widgets, onde definimos as margens de todos os lados, o tamanho da linha, a fonte a ser usada, transformamos os texto em maiúsculas, definimos a cor, alinhamento do texto, em negrito e tamanho da fonte.
Uma coisa que todos devem prestar atenção é sobre herança dos elementos, por exemplo:

Eu defini no body que a fonte é Georgia, então h2 já herdou esta fonte e não preciso declara-la neste elemento, certo? Errado, pois declarei na sidebar que queria uma fonte Tahoma, logo h2 da sidebar herdará está fonte, então por isso preciso declarar a fonte Georgia novamente, pois é a que quero nos títulos.

Acho que essa parte ficou claro. Você deve ajustar este código para seus propósitos, mas sempre lembrando do que já declarou anteriormente. As vezes quebramos a cabeça, pois uma estilização não ocorre como queremos e isso pode ser efeito da Herança ou da especificidade do código. Ainda criarei um tutorial sobre esses dois assuntos que são de grande importância na CSS.

A data nos Blogs são também elementos h2 e aqui podemos ver o efeito da herança. Como são h2 iram receber toda herança do código acima, mesmo sendo uma classe distinta, então por isso precisamos estiliza-la:

h2.date-header {
margin : 0 0 10px;
font-size : 12px;
font-weight : normal;
text-align : center;
color : #999;
}

Definimos uma margem embaixo para dar um espaço, tamanho da fonte, fonte normal, texto alinhado no centro e cor. Note que não declarei a fonte aqui, pois está herdando de h2.

Bom, este tutorial abrange mais 2 elementos de nosso tutorial para criar templates para blog blogspot, que demos inicio como o:

Eles devem ser lidos novamente para que as Heranças sejam notadas e aprendidas. Nosso tutorial é longo e tem muito mais para ser mostrado, mas garanto que se prestarem atenção neles, logo não terão dificuldades de criar templates profissionais.

Por hoje fico por aqui!
Abraços!

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