Não confunda CIO, CEO e SEO

Pra começar: o CIO do título não tem nada a ver com cachorro (rá, achou que você era engraçado né?).

Estão entrando pra lista de palavras faladas de um jeito “alternativo” três daquelas que fazem parte do nosso mundinho: CIO, CEO e SEO.

CIO (quando for ler alto não pague mico, fale “ci-ái-ou”) são as iniciais de Chief Information Officer alguma coisa como Diretor de Tecnlogia da Informação. Esta não representa muito perigo porque quase não é usada aqui nas nossas bandas, só entrou no post pra fazer o trocadilho do primeiro parágrafo mesmo.

Se CIO não é muito usada ainda, por outro lado o uso da sigla SEO vem crescendo assustadoramente. SEO (Search Engine Optimization – espero que você esteja lendo baixinho – fale “éss-i-ou” quando for ler alto) é a otimização pra busca, mas vem sendo pronunciada – e muitas vezes escrita – como CEO (Chief Executiver Officer – “ci-i-ou”) que é o diretor executivo da empresa.

Existem traduções razoáveis pra todas estas siglas, mas já que vamos tomar emprestada a língua dos outros fica aí a dica pra não dar mancada.

Dica CSS rápida para centralizar horizontalmente o layout

Post para alavancar minhas visitas. Sei que vai ter um montão de gente batendo aqui procurando por isso (liga risada maléfica)Muahuahua(desliga risada maléfica).

Uma das dúvidas mais populares de quem está começando a mexer com html e css é como centralizar seu layout. Existem muitas formas de fazer isso – algumas boas e outras nem tanto.

Começo pela melhor (a que eu uso e passo para quem trabalha comigo):

Width 100% no HTML body + margin 0 auto e clear both na div que envolve todo mundo

fica assim:

HTML, body {
width: 100%;
}
div#geral {
clear: both;
margin: 0 auto;
width: 775px; /* Não esqueça desse tamanho aqui */
}

A largura obviamente varia conforme a sua necessidade.

outra boa também é:

text-align no body e na div que envolve todo mundo

o código:

body {
text-align: center; /* Isso aqui é pro IE*/
}
div#geral {
margin: 0 auto;
text-align: left;
}

Uma que não recomendo usar, mas que tem um conceito útil para outras coisas é:

Position absolute com margin negativa da metade

Uma breve explicação: você coloca o layout começando no meio e “volta” com ele a metade do seu tamanho para que ele fique centralizado. Para layouts com largura de 770px, por exemplo, deve-se dar uma margem negativa de 385px.

O código:

div#geral {
position: absolute;
top:0;
left: 50%;
margin-left: -385px;
}

O princípio para centralizar verticalmente é o mesmo – 50% no top e “volta” com o layout pra cima com margin-top negativa, mas será que alguém ainda centraliza layout verticalmente?

Uma observação: onde tem div#geral você substitui com div#<id_da_div_que_envolve_tudo>.

Reli e faltou uma: a tag center. Simplesmente finja que não existe. É melhor.

Abraços!

O código não tem dono

Uma das percepções que vem com o tempo é a de que os códigos, sem dúvida, não têm dono. Mais cedo ou mais tarde alguém diferente de você vai ter que mexer no seu código e esse alguém pode ser realmente outra pessoa ou você mesmo numa fase diferente da sua vida. Tanto numa opção quanto em outra você colhe o que planta: se fez um código com o mínimo de decência tudo flui bem, caso contrário instaura-se o caos (e, com absoluta certeza, você vai ser xingado – por outra pessoa ou por você mesmo).

Um dos fatores decisivos nessa limpeza do código é a escolha dos nomes. Nomes de variáveis, ids, classes, tudo deve ser bem pensado, mas é na escolha dos nomes no HTML que este post vai focar mais intensamente.

Bons nomes refletem o que os elementos são e não o que eles estão. Um bom exemplo é o nome de ids de menus. Supondo que o site tem dois menus: um auxiliar, localizado no topo, e um à esquerda, com mais importância, os melhores nomes são “menu-auxiliar” e “menu-principal” e não “menu-topo” e “menu-esquerda”, uma vez que o que está na esquerda hoje pode ir para outro lugar amanhã com alguma mínima mudança de CSS. Se isso acontecer e o nome não refletir o que o elemento é de fato o nome “menu-esquerda” ficará um pouco sem sentido. É fácil imaginar (já vi acontecendo muitas vezes…) alguém achando estranho uma lista com id “menu-esquerda” estar na direita.

Idem para destaques com nome relacionado à figura de fundo (o nome da classe “sacolinha” não foi o melhor para um destaque que depois virou um globo terrestre).

Outro ponto importante é a escolha do idioma que vai ser adotado. Coerência é importante para que o próximo a mexer no seu código não se perca. Infelizmente é comum termos nomes de figura “bg-header” e “bg-rodape” no mesmo site. Utilize inglês ou português (prefiro o português por não saber quem vai mexer naquele código depois de mim), os dois juntos fica confuso e parece que você não domina os idiomas.

Abraços e até o próximo post!

BlogBlogs e FeedBurner – atenção ao PingShot

Uns dias depois que fiz o blog atualizei meu cadastro no BlogBlogs (tinha um perfil antigo graças aos meus outros blogs) na esperança de que isso aumentasse os acessos ao Melancia.

Hoje entrei no blogBlogs e meu conteúdo nem sequer tinha entrado lá! Tinha feito o procedimento para reclamar o blog (podiam ter arrumado nome melhor hein) e achei que era só isso.

Pesquisei por lá mesmo e li que  no feedBurner existe uma ferramenta que “pinga” o blogBlogs quando tem conteúdo novo – é o PingShot. Se você tem conta no feedburner é só clicar em “My feeds”, depois no feed que você quer enviar, “Publicize” e “PingShot”. Selecione o blogBlogs no “Add one”, clique em add e depois activate.

Fiz e o conteúdo todo passou a fazer parte do blogBlogs rapidinho.

Uma coisa curiosa que vi passando por lá: existe uma tag “Paulo” que me intrigou. Fiquei me perguntando se estava tão desinformado que existia um Paulo super famoso na área e eu não estava sabendo. Entrei na tag e o conteúdo era tão diverso que fiquei espantado, mas logo depois percebi qual era o Paulo tão famoso. Paulo sim… São Paulo.

Comece a pensar em HTML

Sabe Matrix? Pois é… Comece a se conformar que olhar para códigos e ver documentos é possível.

Páginas em XHTML (o X antes é só pra dizer que é extensível, não tem nada a ver com os X-men) são os códigos e o que você vê no navegador é o resultado (o que você vê no navegador na verdade é o resultado do seu HTML somado com seu CSS, mas explico depois). O grande problema aparece quando se percebe que para o mesmo resultado existe uma infinidade de códigos possíveis. Existem muitos motivos para se fazer HTML da melhor forma possível indo de profissionalismo e cuidado à otimização para busca.

Para a criação de um bom HTML é preciso um pouco de prática e senso crítico. Para quem nunca viu, o processo normalmente é assim: o webdesigner cria um layout (no Photoshop, no Illustrator ou outro parecido) e você cria o HTML e o CSS (essa função também é conhecida como HTMLer).

Você então olha pra cara do layout e analisa cada elemento buscando identificar qual é o significado daquela parte no todo. Por exemplo o layout de uma página interna de um site: Existe um topo, um menu lateral, o conteúdo e um rodapé.

Se essas partes estão claramente divididas cada uma delas provavelmente será uma div (o provavelmente é porque existem excessões), ou seja, uma divisão da página. Se no topo tem um título provavelmente ele será o <h1> da página, ou seja, o primeiro título, o título de maior importancia. Se ao lado existe um slogan está aí um candidato a <h2>.

O menu lateral provavelmente é uma lista de links, então tasque uma <ul> e pra cada item uma <li>. Tente entender cada tag que você usar para facilitar a memorização – todo nome de tag tem um porquê. A <ul> é ul por ser uma lista desordenada – unordered list – e a <li> por ser um item da lista – list item.

No conteúdo pode ter uma penca de coisas, mas possivelmente será só uma penca de parágrafos então vamos de <p> pra eles.

No rodapé mora um perigo: se for uma lista de itens (tipo “Fale Conosco”, “Mapa do Site”, etc) também vá de <ul>. Mesmo tendo seus itens um do lado do outro continua sendo uma lista.

Quando terminar abra seu HTML e veja se realmente o que está sendo mostrado pelo seu navegador é o que o layout está transmitindo. Se estiver de acordo com o planejado chegou a hora de estilizar, se não volte e melhore seu código.

Um código bem escrito ajuda não só a diminuir o tamanho do arquivo como também a ser entendido melhor pelos buscadores e leitores de tela pra cegos (sim, cegos usam internet).

Para ver se seu código está no mínimo bem formado utilize os validadores da W3C (existe extensão do firefox pra isso), mas lembre-se: nem sempre código validado pela W3C é semântico, ou seja, tem no seu conteúdo o significado desejado.

Antes que surja alguma dúvida: lista não é só pra links não tá?

Outra coisa importante: esqueça a parte estética, isto é, não veja cores, posicionamentos, alinhamentos, negritos, itálicos, nada disso entra no seu HTML. Nele entra só o que cada coisa é. Seu HTML só vai parecer com o layout proposto quando começar a parte de CSS, mas isso fica para um próximo post.

Abraços e comentem!

Aprendendo XHTML e CSS – Um começo

Depois de tomar uma surra do TinyMCE no drupal 6 (faltava um patch para que a opção de desabilitar o rich-text aparecesse) estou postando de novo.

Um dos objetivos da criação do blog é poder passar dicas que gostaria de ter recebido no começo da minha vida de desenvolvedor web. Pra começar nessa carreira você precisa aprender HTML (direito, sem tabelas – só onde é necessário), depois CSS, Javascript (que não tem nada a ver com Java, por favor…), e alguma(s) linguagens de servidor (PHP, ASP, Java, etc).

No começo nada é fácil, você esbarra em expressões e conceitos que nunca viu e que logo de cara percebe que são importantes (SEO ou otimização para busca, validações da W3C, por exemplo) e vem aquela sensação de estar nadando num oceano, mas assim é a vida.

É possível ganhar dinheiro e se destacar na internet fazendo bem as coisas simples que as pessoas fazem de qualquer maneira e, por isso e para isso, é bom ter uma base de conhecimento bem sólida. Conhecimentos de (X)HTML e CSS nunca serão completos, sempre vem alguma coisa nova, uma combinação de coisas que dão um resultado que você precise ou ainda alguma maneira de fazer as coisas funcionarem no IE (acostume-se com isso: as coisas nem sempre funcionam bem no Internet Explorer – principalmente no 6).

Pra começar indico aqui um exercício simples proposto pela Visie nos seus cursos (foi postado no Tableless).

Ah! Uma observação: nos comentários o pessoal fez uma confusão sobre pagar ou não pagar para ver o exercício. É só se cadastrar (grátis) e acessar.

Bons estudos!