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.

Diário de um passageiro

Na época que decidi criar conteúdo para internet eu andava todo dia no mesmo ônibus no mesmo horário vendo as mesmas pessoas. O fato de vê-las todo dia, podendo observar seu comportamento – às vezes caras de tristeza, às vezes felicidades, ligações telefônicas – me levou a pensar em escrever um blog que teria como título “Diário de um passageiro”. A idéia não vingou (pra variar por preguiça minha).

Ontem terminei de ler “Quincas Borba” do Machado de Assis onde o personagem principal, Rubião, vai da pobreza à morte passando pela riqueza, paixão, ambições, loucura e fome (tudo isso contando com a companhia de um dos Quincas Borba do livro).

Esses fatos aparentemente disconexos, a não ser pelo fato de fazerem parte da minha vida, ficaram mais perto um do outro hoje, quando peguei o mesmo ônibus que pegava antes. Os personagens de antes foram-se embora e percebi a entrada de outros, novos, melhores por suas raridades e diferenças.

Primeiro um ruivo com barba grande e sem bigode que me remeteu à um daqueles leprechauns (ele não vestia verde). Depois um louco, não como o Napoleão/Rubião do Machado, mas uma mistura de Didi Mocó com Ricardo Blat. O cara fazia altos gestos e caretas e todo mundo achava a maior graça. O casal que estava sentado atrás de mim soltou um “só tem raridade nesse ônibus” o que me fez pensar na importância da nossa sanidade, na linha tênue entre ter estilo e ser ridículo e um pouco no sentido da vida (a viagem estava acabando à essa altura).

Fatos do cotidiano me levam a adotar a visão Machadiana da vida: um espetáculo tedioso, onde fatos relevantes são excessões. Vivemos num drama com romance, comédia, suspense, ficções, mentiras, vilanias, ironias e cinismo.

A vida é um espetáculo e o gênero só depende do ponto de vista.

Nova campanha da Hortifruti

Depois dos filmes com frutinhas (sem trocadilho) a Hortifruti lança uma nova campanha publicitária: o Hortitube. Você envia um vídeo pelo youtube e pode ganhar uns prêmios bacanas. Ia colocar aqui uma imagem com o logo da campanha pra fazer uma linha mais profissional, mas como o topo é em flash então deixei pra lá.

Pra quem estiver se perguntando porque estou postando isso aqui é só ver a lista de estrelas da campanha para entender e se alguém fizer alguma graça com “melancia na cabeça” pode apostar que tiraram a idéia daqui.

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

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!

Gabeira perde eleições no Rio – Por quê?

Não era intenção falar de política aqui, mas com o resultado da última eleição preciso desabafar em algum lugar.

O Gabeira perdeu as eleições aqui no Rio de Janeiro porque pouco mais de 55.000 habitantes escolheram o outro candidato, mas porque decidiram votar nele? Um homem que trocou de partido 700 vezes, atacou ferozmente o presidente Lula e depois colocou o rabo entre as pernas e pediu ajuda na campanha merecia ter ganho? Dizemos ganhar mais pontos o candidato mais honesto, mais visionário, mais inteligente… tudo mentira.

Confesso que me decepcionei com o povo do Rio. Não se vota com consciência, com informação ou qualquer outra coisa boa e sim com um pouco de fofoca e ouvi dizer. Tudo que ouvi dizer contra o Gabeira foram argumentos preconceituosos e impensados, irracionais até. Achar que o homem ia querer liberar a maconha no Rio de Janeiro? Por favor né? Não acreditar nele porque ele mora na Zona Sul? O Eduardo Paes não mora em nenhuma favela não!

Restou-me torcer para que o voto deixe de ser obrigatório. Quem não vê utilidade em sair de casa e exercer seu direito não deveria ser obrigado a votar, assim quem pesquisasse mais e procurasse saber das coisas direitinho faria uma escolha mais acertada.

Com as eleições ganha sempre a democracia, o querer da maioria, mas dessa vez subiram no pódio a ignorância e a falta de conhecimento do povo.

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!

Fone de ouvido não é megafone – campanha pelo respeito ao ouvido alheio

Post curto sobre a falta de noção das pessoas que andam comigo nos transportes públicos.

Hoje, na ida pro trabalho, sentei do lado de uma estranhíssima figura. Roupa estranha, cabelo engraçado, óculos escuros, pulseiras e um celular na mão. Preso ao celular um fone de ouvido.

Tenho dormido pouco e mal durante os últimos dias e achei que poderia descontar o atraso do meu sono cochilando na ida pro trabalho. Não consegui. O figura do parágrafo anterior ouvia seus funks no último volume! O som era tão alto que parecia que o fone de ouvido dele era uma espécie de megafone, sei lá. Mudei de lugar – um banco na frente – mas não adiantou. Fui acordado mesmo, quase xingando o infeliz pelo falta de educação.

Na volta do trabalho a esperança voltou: peguei o metrô, depois a integração e já ia embarcando num cochilo quando um rapaz sentado do outro lado do ônibus começa a conversar no celular. Conversar não, berrar. Seres civilizados não conversam daquele jeito. Falava tão alto que praticamente acompanhei a conversa inteira mesmo estando sem o menor interesse na professora dele que não foi a aula porque estava doente e sei lá mais o que.

Não foram as primeiras vezes que coisas assim aconteceram. Na próxima vez que um maluco começar a falar/ouvir som alto no busão prometo protestar: começo a berrar no ouvido do infeliz…

Módulos Drupal essenciais

Pensei um bocado mas não consegui chegar ao meu primeiro post inteligente nem em uma boa comparação entre sites e locomotivas como meu amigo Victor do Design Labs. Na falta do que dizer atualizo então meu imenso modesto público com o que fiz no blog até agora.

Quem usa Drupal sabe que tem módulos que não vem na configuração original mas que são essenciais para a decência de um blog. Segue a lista dos que eu utilizei:

Feedburner
módulo para a substituição do RSS padrão do Drupal pelo endereço fornecido pela Feedburner (ferramenta para análise de acessos ao Feed do site)
Google Analytics
incluir a tag do Google Analytics no tema é o mais intuitivo, mas com esse módulo temos maior controle de onde ele aparecerá, além da opção de analisar por perfis do drupal, adicionar parâmetros de segmentação, etc.
TinyMCE FCKeditor + IMCE
dobradinha ideal para editar conteúdo sem dores de cabeça. Enquanto o primeiro cuida da edição do texto o segundo fica com o upload fácil de imagens. É bem fácil instalar tanto um quanto outro, pro primeiro você vai ter que baixar o javascript e colocar na pasta certa, mas é o processo é bem tranquilo. O FCKeditor resolveu todos os problemas que eu tinha com o TinyMCE, possibilitando escolher em quais textareas que eu queria wysiwyg entre outras coisas. O IMCE uso desde o começo e nunca me deu problema.
Token e Pathauto
o primeiro só veio porque é requisito pro segundo. O Pathauto faz nada mais nada menos que url amigáveis de graça para você. Se o título do seu conteúdo é “Popeye foi a feira” o pathauto sugere uma url como “popeye-foi-a-feira” o que é ótimo para buscadores. Para completar ele traz facilidades como inserção do tipo de conteúdo na url, substituição de caracteres, etc.
Views
campeão para muitas coisas este módulo (que traz alguns outros módulos junto com ele) serve para fazer… visualizações. Montar listas de conteúdo que seguem determinados parâmetros, categorizações, arquivos é a função deste módulo.
XML Sitemap
ainda na versão beta este módulo faz pra você um sitemap que pode ser enviado para a Google, através do Google Webmasters Tools o que agiliza a indexação do seu site.
Global Redirect
Verifica se a página solicitada tem alguma url mais amigável e aplica um redirect 301 se for o caso
Meta tags
Adiciona campos para a inclusão de meta tags no formulário de edição do node
Poormanscron
facilita a chamada ao cron. Com ele não é preciso configurar o servidor, ele mesmo vê se está na hora de chamá-la (o intervalo é configurável) e faz isso pra você
Scheduler
agenda a (des)publicação dos nodes. Ideal para aqueles que escrevem o artigo num dia mas querem que ele seja publicado só depois
Similar By Terms
é o “Veja Também”. Ajuda a manter o usuário navegando no seu blog, indo de um artigo para outro que esteja relacionado. Usa o taxonomy com base
Trackback
achei que fosse ser mais útil. Até agora não recebi nenhum trackback que valesse a pena. Em compensação enviei alguns e ele funciona direitinho

Além disso usei o Trigger (esse é padrão) para saber, por e-mail, quando chegou comentário novo.

Por enquanto é isso gente. Espero que este post seja útil e traga mais visitantes para essa nova casa!

Abraços e comentem!

ps.: No dia 9 de Abril 8 de Julho eu dei uma atualizada neste post.

Como pode ser tão difícil escrever em um blog?

O blog foi pro ar no dia 14 e desde então tenho pensado no que escrever aqui. Antes, na época que eu estava só editando o tema sem compromisso, tinha idéias mirabolantes de conteúdo, coisas que seriam utilíssimas para a comunidade e que me transformariam numa mistura de Machado de Assis, Luis Fernando Veríssimo, Jabor e Carlos Cardoso.

Hoje me sinto jogando no Tabajara Futebol Clube dos blogs, mas hei de me tornar famoso e ser chamado para escrever posts patrocinados.

Enquanto não fico famoso tenho uma idéia de conteúdo fui ajustando o tema – figuras de fundo, algum css, coisas assim – e instalando alguns módulos que comento num próximo post.

Abraços a todos e visitem sempre!