Dicas de CSS #3 - Trabalhando com Frameworks
Postado em December 3rd, 2008| Algo sobre CSS, Dicas, Sites, Tutoriais, Web Standards
Hi. Estou de volta após uma grande correria de 2 semanas, entre compra de móveis ara o novo home office, pintura, e outras preocupações de fim de ano.
As dicas de hoje são para os meus amigos da Fatec. Vou escrever umas dicas para o uso de framework, visto que algumas pessoas tem me perguntado sobre questões de organização de arquivos, includes e outros detalhes que fazem a diferença na hora de codificar páginas. Começando.
1. Crie uma estrutura padrão: A maioria dos sites que faço, possuem itens que sempre estarão presentes, tais como menu, topo, uma div para servir de corpo (no meu caso, #principal) e por ai vai. Então você ganhará tempo se já tiver essa estrutura html pronta, para usar sempre a cada novo projeto. Além de ganhar tempo, isso também ajudar a criar padrões. Isso também é válido para o css.
2. CSS pronto pra ação: Crie uma estrutura padrão também no css, tais como formulários, listas, classes para uso geral, comportamento de links. Dessa forma vc sempre terá uma classe pronta para uso, ajudando a padronizar o código.
3. Use includes: O uso de includes evita que você repita códigos sem necessidade. Por exemplo, ao invés de inserir o código html do menu em todas as páginas, crie o menu em um arquivo separado, e sempre que necessário utilize o include para referenciar na página desejada. Dessa forma, se necessitar alterar o menu, só precisará alterar um arquivo.
4. Organize suas pastas: Uma das piores práticas que podem ser utilizadas, é a não criação de pastas para separar os arquivos. Pelo menos as pastas básicas devem ser criadas (imagens, css). Outras também ajudam a organizar, tais como “includes”, “JS” e “flash”. Particularmente, a pasta imagens, eu ainda separo entre “principal”, “internas” “temporarias”.
Essas são as essenciais, a medida que eu vá lembrando de outras dicas, vou postanto. Té mais
Google Bombing
Postado em November 6th, 2008| Algo sobre Google, Vale uma risada, Web Standards
Oi povo. Não tenho blogado muito ultimamente devido a alguns problemas que me transtornaram nos últimos 10 dias. É stress com operadora de telefonia móvel, cartão de crédito, é devedor que não quer pagar e por ai vai.
Lendo meu feeds, vi que o Henrique Pereira do Revoluções.etc.br passou por algo parecido recentemente, e comentou sobre o Protesto 2.0. Como protestar em tempos de web.
Algo que está diretamente relacionado com isso, é o Google Bombing.
Google Bombing consiste em inserir links em diversos sites utilizando o mesmo texto âncora e a mesma página linkada até que o resultado da busca deste texto âncora retorne como a primeira opção na busca. Por exemplo, se esse link (Moto para Designers) for adicionado em vários sites, passará a ser relevante.
Essas atitudes em geral são utilizadas em caráter de humor, ou crítica. O link que usei foi só para exemplificar. Entre os exemplos mais famosos, temos “Atriz Gorda” que retorna a Preta Gil, “Mulambada” que retorna a página do Clube de Regatas Flamengo, e Déspota Cachaceiro, que retornava uma página com a bibliografia do presidente Lula.
Este texto não está na página linkada, mas está no link para ela. Se várias páginas fazem a mesma coisa, então a relevância da página é maior ela aparece nos primeiros resultados. Quando chegar ao primeiro lugar na busca, vira Google Bomb.
É certo que daqui a um tempo, o Google vai descobrir uma maneira de burlar isso (se não ja descobriu), mas enquanto isso, pode-se fazer algumas críticas (de preferência, com responsabilidade).
Valeu galera, até a próxima.
Meta tags, até onde vai a apelação
Postado em October 27th, 2008| Algo sobre Google, Ossos do Ofício, Web Standards
Bom dia a todos. Após um tempo ausente, estou de volta, vida de freela não ta fácil, e ainda com stress com minha operadora de celular, mas isso é assunto para outro post.
Hoje venho falar de algo que venho notado a algum tempo, o uso (mal uso na verdade) de meta tags e a tag <title> nos sites. Antes, vamos a um breve resumo de o que é e como utilizar.
Meta tags:
Meta tags, são linhas de código HTML, que passam informações do seu site para para os buscadores. Em geral essas informações são descrições da página, palavras chave, autores do site, entre outras, mas essas 3 são as mais inportantes.
Keywords:
As keywords são as palavras chave do site/página. São as palavras que você imagina que o usuário irá pesquisar para achar o conteúdo do su site. Segue exemplo.
<meta name=“keywords” content=“webdesign, web design, designer/>
Description
O description, é uma pequena descrição do conteúdo da sua página, ela é exibida nos resultados das buscas no Google.
<meta name=“description” content=“Criação de sites, CSS XHTML” />
Title
Title, apesar de não ser uma meta tag, está bastante relacionada, ela é a tag mais importante do código da página. Ela, juntamente com as tags <h1> e <h2> são responsáveis pelos itens importantes do documento html.
Agora que vocês já foram apresentados aos personagens do post, vamos aos fatos.
As meta tags, são usadas para mostras aos mecanismos de busca (em especial o Google), do que se trata o conteúdo do meu site. Então se o meu site é sobre Ler o futuro em borra de café, minhas meta tags terão a ver com esse assunto. Então é previsivel que tenha palavras como: café, previsões, futuro, exoterismo, etc etc etc.
Acontece, que hoje em dia é comum de se ver na net, sites apelativos nesse sentido. Com meta tags e títulos que mais parecem ter sido retiradas do wikipedia, de forma que qualquer assunto que você buscar, essa página vai retornar.
Dessa forma, outros sites tendem a alterar sua palavras chaves também, a fim de concorrer com os exagerados da história, ampliando o efeito sem noção, e fazendo com que o resultado do Google seja falho, já que as palavras chaves desses sites são apenas um encher linguiça.
Vou ficando por aqui, e tentado uma maneira de não cair nas pesquisas do Google, sem precisar aderir ao método apelação. Té +
Formulário Semântico com CSS
Postado em August 31st, 2008| Algo sobre CSS, Dicas, Tutoriais, Web Standards
Um dos passos mais difíceis para quem trabalha com CSS, (geralmente quem está migrando de Table para Tableless), é a parte de formulários.
Vou listar abaixo algumas dicas de como criar um formulário simples, formatando apenas com CSS. Mãos à obra.
Não é necessário o uso de tabelas para diagramar um formulário. Para aqueles que tem vários tamanhos de campos, crie várias classes com tamanos de acordo com a necessidade. Veja o exemplo.
Esse exemplo é bem simples e da para ser usado como base para formulários mais complexos.
Microsoft liberou Internet Explorer 8 versão beta 2
Postado em August 29th, 2008| Algo sobre Bugs do IE, Web Standards
Ontem a Microsoft liberou a versão beta 2 do Internet Explorer 8. Com diversas melhorias na parte de segurança, ele vem para tentar bater de frente com o nosso amigo Firefox 3.0.
Entre as novidades temos o Inprivate, onde o usuário poderá ocultar temporariamente o histórico da navegação, e outros fatores que forneçam dados de acessos anteriores. Tem também bloqueio de sites de Phishing, e avisos para quando você for encaminhado para alguma página com domínio diferente da página atual.
A questão das abas foi mantida, e aparentimente melhorada, agora as abas semelhantes são agrupadas e detacadas com cores diferentes.
Essas são algumas das novidades divulgadas até agora. Enquanto ele não entra na moda, ótimo, um a menos no css.
Para quem tiver interesse (coragem) de instalar o IE8, segue o link para download, mas sinceramente aconselho o Firefox 3.0.
Esperamos que a Microsoft tenha acertado dessa vez. A questão é até quanto teremos que aguentar o IE6 e os seus bugs. Resta esperar.
