Blogando!

Olá Mais uma vez. Neste artigo serão mostradas algumas dicas para projetar Folhas de Estilos para os iniciantes em CSS. Espero que elas se constituam em uma fonte de consulta útil para você que está iniciando o desenvolvimento CSS.

1- Organize sua Folha de Estilos agrupando blocos de regras CSS similares e colocando comentários no início e no fim de cada bloco.

Exemplo:

CSS

2- Ordene suas regras CSS em uma sequência que faça algum sentido.

Exemplo:

• regras CSS para elementos gerais do HTML;
• regras CSS para links gerais;
• regras CSS para listas;
• regras CSS para as divs na ordem que aparecem no HTML
  seguidas por regras CSS para elementos dentro das divs;
• regras CSS para classes gerais;
• outras.

Nota:  Você deverá criar uma sequência que atenda suas necessidades.

Read More

A web 2.0 é marcada pelo uso do branco e dos tons pastéis nos principais sites do mundo. No Brasil, a exuberância das cores é que predomina nos nomões da internet.

O último a aderir às cores fortes é o iG – na mesma linha do G1, com menus horizontais multicoloridos. É uma reviravolta e tanto em relação às cores claras e discretas do design anterior, no qual as fotos e os anúncios é que chamavam mais a atenção.

Essa estética tropical faz sentido? Talvez. O G1 é um sucesso indiscutível, com seu conteúdo de primeira linha – é inclusive candidato a site do ano no Prêmio INFO 2007. O iG é um portal que vem marcando pontos de novo, depois de um período de baixa.

Se você é do time que prefere as linhas mais limpas de um Guardian Unlimited (http://www.guardian.co.uk/) ou um Washington Post (http://www.washingtonpost.com), o que fazer diante dessa avalanche colorida? Aparentemente, nada. Talvez isso seja apenas mais uma idéia fora de lugar...

Fonte: Blog da Sandra (http://www.infoexame.com.br)

Navegando na Net ontem, descobrí o WeShow - http://www.weshow.com/br - (graças ao adsense de um amigo), um serviço da web 2.0 muito interessante, que permite que o usuário cadastrado no site (cadastro grátis) crie um "visualizador" para mostrar vídeos do youtube diretamente em sua página/blog/desktop. O serviço conta com vários vídeos divididos em mais de 150 canais, como automóveis, celebridades, filmes, humor, etc. Além destes canais, o usuário pode ter seus vídeos favoritos presentes nesta ferramenta, bastando para isso adicioná-los ao seu perfil.

Em poucos cliques, qualquer um pode disponibilizar automaticamente os melhores vídeos em seu blog ou website, sem qualquer tipo de preocupação com atualizações ou outras questões técnicas.

O WeShow possui recursos de customização que permitem sua integração não só com o conteúdo do site que optar por adotá-lo, mas também com o ambiente, pois ele poderá escolher entre dois modelos distintos – vertical e horizontal – e optar pela cor que mais lhe agradar. O WeShow possui também, um visual inovador com o objetivo de atrair e reter audiência.

O resultado de meu teste no WeShow pode ser visto em http://www.wieczorek.com.br

Navegando pela net a uns dias atrás encontrei um serviço da web 2.0 muito interessante. Um slide (clipe). Através do site http://www.slide.com é possível gerar um slide com as suas fotos e colocar em sua página, disponibilizar para os amigos e muito mais.

Para gerar o seu slide basta fazer o cadastro (gratuito) no site e fazer o upload das imagens/fotos com as quais você vai gerar seu slide. Existem diversos efeitos e configurações disponíveis. Além disto, o site gera automaticamente uma página que mostra todos os seus slides produzidos, além dos códigos para inserção em sua página e o link para enviar a seus amigos.

Existe também a opção de que o usuário avalie e deixe comentários para o slide.

Para conferir os meus trabalhos de teste, é só acessar http://emiliomw.slide.com. Também coloquei um dos slides em minha página pessoal. Confira o resultado em http://www.wieczorek.com.br.

Você já deve ter visto em muitos sites um pequeno ícone junto ao endereço eletrônico na barra de navegação do browser. Esta imagem é chamada favicon. Este ícone, além de exibir o seu logotipo, ajuda na localização do seu site em uma lista de favoritos.

A criação de um favicon é bastante simples. O primeiro passo é desenvolver (ou encontrar) uma imagem quadrada para seu site (isso mesmo, tem que ser quadrada, pois o ícone tem geralmente resolução de 16x16 pixels). Em seguida utilize algum utilitário para converter a imagem em ícone. Após isto, envie o arquivo para o seu servidor (pode ser em qualquer diretório) e adicione a seguinte linha de código no cabeçalho do seu site, lembrando que no href deve ser colocado o caminho do ícone em seu servidor.

<link rel="icon" href="/favicon.ico" type="image/x-icon"/>

Bem, esta solução funciona perfeitamente, mas somente para o Firefox. O IE possui algumas restrições com relação a este arquivo .ico que deve ser utilizado para este fim. Depois de muito penar, consegui fazer com que o IE (6.x e 7.x) exibisse o ícone que escolhi para meu site.

Vasculhando na Internet, descobri que o grande problema da exibição do ícone por parte do IE está na geração do arquivo. É necessário que o mesmo possua algumas características específicas, como resolução, quantidade de cores, etc. Tentei gerar com o paint, com o PhotoShop e nada. Não conseguia fazer com o IE mostrasse o ícone. Para resolver este problema, utilizei o serviço disponível em http://www.htmlkit.com/go/favicon que transforma qualquer imagem em um ícone compatível com o IE.

Neste caso, fiz a geração do ícone abaixo.

No IE 7.x a exibição é automática (lembre-se de fazer a limpeza do cache). Já para o IE 6.x é necessário que, além da limpeza de cache, seja feita a inclusão do site em “Meus Favoritos”. Após este procedimento o ícone aparecerá sem nenhum problema em todos os acessos ao site.

O Resultado final foi este:

Não fiz o teste com outras extensões de arquivos, mas sei que o Firefox não tem restrição com relação ao arquivo a ser gerado, trabalhando também com as extensões .png e .gif.

Espero que com este post eu possa ter ajudado a muitos que ainda tem dúvida em como exibir o ícone do site no Internet Explorer.