Como promover a Netiqueta ?

Nós que já somos cidadão idosos da Internet conheçemos bem a Netiqueta. Mas sempre vão surgindo a mãe de um amigo, a sobrinha que cresceu ou o humanista que achava que a Internet era só para geeks etc que entram na rede e ficam somente a repassar piadinhas ou tralhas que recebem de sei-lá-quem.

Sobre o problema de todos os endereços, inclusive o meu, ficarem expostos na repassagem eu já nem esquento. O que mais me preocupa é que passo a desconsiderar e-mails dessas pessoas, e acabo perdendo contato digital com elas. Ai quando me convidam por e-mail para alguma festa, ou mandam uma mensagem realmente para mim, passa despercebido.

Eu sou meio cascagrossa e nas vezes que dava esse toque à pessoa, ela geralmente se ofendia e me mandava para aquele lugar. Então parei de dar o toque e tento conviver com isso.

Mas resolvi dar o toque novamente para uma amiga querida. Respondi isso:

Para: Selma
Assunto: Re: Fw: Re: Re: Re: “O AFOGAMENTO DE LULA…”{ABRA É ÓTIMA E NOVA}

Selma, eu reluto muito antes de dar essa dica para as pessoas, mas chegou a hora.

Como você espera que eu leia algum dia uma mensagem que você realmente precisa que eu leia, que a “Selma escreveu para o Avi” ?

Só recebo e-mails genéricos de você, que geralmente não tenho tempo de ler porque sei que são impessoais.

Não quero perder contato digital com você, mas por enquanto seus e-mails estão sendo tratados pelo meu sistema como “repassador generico, arquivar sem ler”.

Então a dica é: valorize suas mensagens, enviando para as pessoas somente o que for realmente pessoal entre você e elas.

Obrigado,
Avi

Lanço uma pergunta no ar: qual é a melhor forma de dar esse toque, sendo delicado e efetivo ?

Outra pergunta: como os sábios e idosos cidadãos da Internet lidam tecnicamente com isso? Regras de arquivamento automático no GMail? Filtros REGEX para /Re: Fw: Re:/ ?

Boas Vindas à Correia Fotorreceptora

E falando em amigos, favor dar as boas vindas ao André Uratsuka Manoel que acabou de ingressar na blogosfera.

Consta que ele teve uma estréia dupla hoje, porque além do blog saiu também no Link do Estadão, com foto e tudo, falando de pé para uns 50 ouvintes no BlogCamp que aconteceu semana passada em São Paulo. Na ocasião ele chamava a atenção dos representatnes da blogosfera brasileira sobre questões legais, de propriedade intelectual, e responsabilidade do dono do blog inclusive sobre a parte de comentários de terceiros em suas páginas. Dá até para me ver mais ou menos na foto também.

Voltando a rasgação de seda, pode-se dizer que o André é um dos grandes pilares da Internet brasileira. Cérebro por trás de cohecidas incursões na Internet de nomes como Bradesco, NET Virtua, zip.net, Agência Estado, iG e muitos outros, junto com a Insite, sua empresa.

Ele é um daqueles caras que em uma conversinha de 15 minutos vira sua semana pelo avesso. Principalmente se você estiver metido com tecnologia, porque quando você pensa que descobriu uma coisa nova e está sendo inovador, ele já voltou com a colheita.

Mas não só de Internet, Kernel, IPTables e mod_perl vive o André. É espetacular encontrá-lo para conversar de cultura, sociedade e livros, muitos livros. E pizza de margherita do Speranza.

Como então um dito filhote de Internet só começou a blogar agora? Talvez porque confundiram quem é pai de quem aqui e o verdadeiro pai estava é muito ocupado em criar o filho.

Então para esquentar a Correia Fotorreceptora vou fazer de novo: por falta de espaço vou retirar o feed do grande Cezar Taurion da minha barra lateral e colocar no lugar o do grande André.

Por favor, o caminho é por aqui.

Some SVG Games

I’ve been using SVG more as an offline drawing language and not much as a technology for the web. But I met a friend in a bloggers conference this weekend and he mentioned something obvious, but that I never looked for: an SVG Tetris game. Of course there are many other SVG games.

Check it out:

SVG is just the language to represent graphics and get input. Game logic is actually written in JavaScript.

Web developers are used to mix (X)HTML with JavaScript. Maybe it is time to start thinking about mixing SVG and JavaScript to see proprietary technologies as Flash or Silverlight to be less massively used. For that, better IDE tools for JS+SVG will be required and browsers and platforms must find a more standard way to render audio and video (a feature covered by Flash and SL, but not by SVG).

Viagem de Inovação aos EUA

Andei postando sobre algumas coisas que tenho visto aqui nos EUA, mas não contei o que de fato vim fazer aqui.

A IBM tem um grupo chamado International Technical Support Organization que produz livros técnicos chamados Red Books. Trata-se de livros gratuitos que podem ser lidos ou baixados do site do ITSO. Pode-se também comprar cópias impressas que geralmente damos para clientes. Os autores são voluntários do mundo todo, geralmente funcionários da IBM, mas também clientes, parceiros ou qualquer pessoa que se qualificar na entrevista feita para a chamada do livro na lista do ITSO. O livro é geralmente escrito em Austin, Texas (há também outras localidades) durante algumas semanas de imersão. Todas as despesas de viagem são pagas pela IBM, tem se a oportunidade de trabalhar com pessoas de diversas partes do mundo, e fazer mais turismo que só o superficial.

Alguns livros interessantes que o ITSO produziu:

Bem, vim participar de um livro menos técnico que a média do ITSO. Conta como a IBM criou um programa interno de inovação onde qualquer funcionário pode criar, divulgar e hospedar na Intranet algum software que aumente a produtividade dos funcionários. Qualquer coisa. Desde simples plugins para o Firefox, Lotus Sametime, uma ferramenta de blog corporativo interno, ferramenta de criação de wikis internos, uma aplicação para sincronizar mídia interna com dispositivos móveis, etc.

Dentro da IBM chamamos essas coisas de inovações e são tratadas como beta, para beta testers ou early adopters.

Ao longo do tempo elas vão amadurecendo, viram um serviço padrão da Intranet, e as vezes acabam até virando produtos que a IBM vende. Foi exatamente o caso do Lotus Connections, um produto para ser usado numa Intranet e que tem serviços como diretório de funcionários, departamentos e suas linhas gerencias, blogs, tagging tipo del.icio.us, entre outras coisas. O Lotus Connections reune exatamente o que funcionários da IBM andaram usando e refinando ao longo dos últimos anos, e posso dizer que é o que temos de mais útil na nossa Intranet.

O modelo desse programa de inovação livre é muito parecido com o universo Open Source. As tais “inovações” podem ser comparadas a um software GPL que alguém fez e publicou no Freshmeant.net, este comparável ao portal na Intranet que indexa todas as inovações, mede sua vitalidade, fornece notícias e links para acesso ou download.

Conversei com muitas pessoas que estão em altos cargos globais, entre eles a CIO global da IBM, e é interessante ver como pensam e as informações que tem acesso. As vezes pensamos que eles estão longe do mundo real mas surpreendentemente tem muito mais noção das coisas do que um gerente de nível mais baixo.

As pessoas que criaram esse processo de aceitação e publicação de inovações dentro da IBM tem a sensação que inventaram a roda porque é de fato muito bem sucedido e todos conhecem. Mas na verdade funciona igualzinho a comunidade Open Source. Há um quê de liberdade, de esforço por um bem maior, de comunidade. Copiaram sem saber que copiaram.

A grande inovação está mesmo no fato de que trouxeram a dinâmica da comunidade Open Source na Internet para dentro de uma empresa, para gerar valor de produtividade interna.

O livro conta mais detalhes. Aguardem a publicação.

Candidatos Democratas e o YouTube

Ontem aqui nos EUA passou na TV um debate dos pré-candidatos democratas (entre eles somente um será o candidato a presidência a representar os democratas).

Da perspectiva política já era um debate interessante, mas o que realmente chamava atenção era o formato.

O programa chamava-se CNN & YouTube. As pessoas gravavam e enviavam suas perguntas pelo YouTube e no programa o video era apresentado num telão. Junto havia o logotipo do famoso site e podia-se ver também aqueles controles tradicionais de Play, Pause, etc do videos do YouTube.

Alguns videos eram bem simples, com o cidadão fazendo uma pergunta em frente a câmera. Outros tocantes, como o do homem mostrando o túmulo de seu pai, avô e filho mais velho que morreram em guerras. E outros bem produzidos e editados, e engraçados.

As perguntas eram das mais variadas: saúde, impostos, guerras e a guerra com o Iraque, aquecimento global, e aquecimento global relacionadas ao alto padrão de consumo americano.

A indústria do entrenimento não se contenta mais em receber a ligação ao vivo e transmitir a voz do telefone. Buscou e encontrou um novo formato. No site da CNN há uma video-matéria entrevistando os fundadores do YouTube discutindo essa nova forma de debate, com cenas do debate em sí. Há muitos outros videos sobre o debate em CNN.com.

Eu achei muitíssimo interessante. Os pré-candidatos que se destacaram foram Barack Obama e Hillary Clinton. E se você visitar seus sites verá que ambos tem blogs e outros mecanismos a la Web 2.0 de interagir com seus clientes, digo, eleitores.

Viagem de Nerd

Não é de hoje que vos digo que o Google Maps é o melhor site da Internet (depois de um blog ou outro).

Pois bem, vou fazer uma longa viagem a trabalho para os EUA, com muitas cidades, muitos lugares para ir, vários hoteis, muitos aeroportos. E como todo bom nerd, estou posicionando todos esses pontos em um mapa pessoal.

meu mapa pessoal

Ainda mais nos EUA, que está inteiro semanticamente mapeado (na linguagem nerd: the country is entirelly geocoded). Assim posso traçar rotas e imprimir mapas personalizados e não mais quebrar a cabeça procurando os meus lugares em mapas genéricos.

Não vivo mais sem o Google Maps.

Ah, esses Agregadores

PlanetaEsses agregadores de feeds estão entre as coisas mais interessantes que aconteceram na blogosfera. Isso é a pura Web 2.0 em ação.

Coisa mais óbvia: juntar em um só lugar todo mundo que se interessa e escreve sobre mais ou menos o mesmo assunto.

O interessante começa no “mais ou menos”. Porque eu, fulano e sicrano não escrevemos só sobre tecnologia. Mas já que estamos aqui, por que não ler sobre outros assuntos que estão escrevendo pessoas com quem temos afinidades ?

Com a isca do “só vou ver o que mais vai ler quem for me ler” ou “só vou ver como meu post ficou no planeta” você foi fisgado pelo meme. E a informação flui, a consciência se amplia, e a qualidade dos leitores melhora.

Meu blog já está em 3 planetas técnicos. Mas quero mais, muito mais. Quero estar em agregadores não técnicos também. O resto do mundo precisa conhecer essa maravilha cybersociológica.

E tenho preparado os feeds do meu blog para isso: além das amadas tags/categorias por assunto, estou criando também tags operacionais, tipo lang:en para posts em inglês, geek:no para classificar coisas para mortais não técnicos, etc. E forneço o feed mais abrangente possível, de acordo com a audiência do planeta/agregador.

Matisse

Se você também está num desses agregadores, deve estar me lendo agora. Saiba que eu te leio também. E adoro. E comento no seu blog. Então comente no meu também. É legal. É giro (para os portugueses que me lêem).

Para os que que só lêem, tratem de criar um blog e entrar para a festa. É legal. É giro.

Microsoft Silverlight

When we think all standards, tools and frameworks for web on the client was already invented and now its time to spread its use, Microsoft comes with a “new” thing: Silverlight.

Silverlight logoSilverlight has same functionality of Adobe Flash. You install it on your desktop system and it works as a browser plugin. Silverlight leverages proprietary .NET, thus it is proprietary too.

When it says cross platform, read Windows and Mac only.

Development tools are Microsoft only.

My advise is to stay away from Microsoft Silverlight or any Mono reimplementation as Moonlight (as noted by Roberto Teixeira in comments). It will lock you in into proprietary technologies.

These are some alternatives (name in bold) for such an impressive interactive web functionality:

  • JavaFX [home] should be considered as a trully open standards alternative. Altough it is as new as Silverlight, JavaFX leverages all mature Java ecossystem.
  • SVG+JavaScript. A true and mature W3C standard for advanced 2D graphics presented as a XML dialect embedable in web pages. With the addition of DOM capabilities of well known JavaScript, SVG can have provide advanced animations. Drawbacks here are lack of user friendly graphical development and animation tools. SVG does not provide multimedia, but this type of content can be used leveraging the regular media player (and its browser plugins) the user has installed on its system.
  • Althought YouTube and other great online video services use Flash to deliver multimedia content, Flash is generally known as evil for web applications. But if you need such a fat client for web, Flash is more cross platform, cross browser and widely used than Silverlight.
  • Plain AJAX can also deliver high impact interactiveness. Its capabilities are similar to SVG above.

As happened with Real versus Microsoft media formats, and Java versus .NET, it is expected that when Silverlight gets more popular, the Flash plugin will be removed from default Windows installations (forcing users to explicitly install it), considered as non-strategic (or a competitor) for Microsoft.

500 Comentários !

Tinha previsto para o fim do ano chegar a 500 comentários no post de Aquecimento Global.

Essa marca foi alcançada hoje, 6 meses antes 😀 . A média é +/- 3.3 comentários por dia ou 22.8 por semana.

Pena que poucos realmente se salvam. Tinha apontado alguns engraçados, mas outros melhores ainda apareceram:

Pelo menos fico feliz em saber que estou contribuindo com vários trabalhos escolares.

The Web and the Internet :: A Web e a Internet

  • The Internet is the collection of cables, routers, protocols, servers, IT services and data you can access with a browser or some other networked application.
  • While the Web is a mesh of human relations where knowledge and experiences are being trade.
  • Web 2.0 is the Web that uses the Internet in a more optimized way.

  • A Internet é o emaranhado de cabos, servidores, roteadores, protocolos, dados e serviços de TI que se pode acessar com um browser ou outro programa de rede.
  • Já a Web é a malha de relações humanas onde se troca conhecimento e experiências.
  • A Web 2.0 é a Web que usa a Internet de forma mais otimizada.

Welcome Planet Fedora Readers

My blog feed was included in one more of these planet-like web sites.

Welcome Planet Fedora readers.

I was already being read by Pandemonium and Planeta GNU/Linux Brasil readers.

I guess 90% of high quality readers and comments I get come from these community planets. OK, I have some very popular posts with 470+ comments but they are terrible.

For new readers, I blog a lot about Linux, Open Standards, Open Source, ODF, business related to all this stuff together with SOA, Web 2.0, and all those buzwords. At work I was asked to start blogging, to keep a connection with the community. So I can say to blog is officialy part of my job.

I also enjoy writing about travels, food, metaphysics, music, politics, and this is the place I store my published articles and presentations I use to deliver in events. Most of that in portuguese, but many technical stuff are in english.

Welcome all.

SOA, Web Services, Virtualização, Grid, Web 2.0: Mashup gigante

SOA é um estilo de arquitetura que tenta alinhar melhor processos de negócio com a TI.

Apesar de os frabricantes de TI — como a IBM — serem os que mais falam sobre isso, ingressar em SOA significa primeiro modularizar seus processos de negócio para depois mapear isso aos módulos de aplicações e infra-estrutura.

Grid é um conceito meio obsoleto. Como conceito, mas não como tecnologia. O conceito é obsoleto porque sua atuação é extremamente estrutural e muito complexa. Toda a terminologia relacionada a Grid tem caráter técnico, difícil de explicar e de nada adianta uma empresa pensar em Grid se seus processos de negócio e aplicações que os implementam não estiverem modularizados.

Por isso inventaram SOA. Para que provedores de TI pudessem ter um discurso mais ameno e acessível ao vender a idéia para gestores em seus clientes. E também para atacar o problema do excesso de complexidade da TI do cliente em sua raiz: na modelagem de seus processos de negócio.

E Web Services, onde entra? Dividindo em camadas, o conceito de SOA mora na fronteira entre negócios e TI. Na hora em que os processos vão se materializar em software e aplicações, a boa prática sugere usarmos certos padrões de desenvolvimento, de integração entre módulos. Esses padrões foram agrupados juntos nas especificações de Web Services, e se preocupam em definir como se faz chamadas a serviços (métodos) remotos, como um serviço encontra outro, etc. Então, nessas camadas conceituais, Web Services encontra-se logo abaixo de SOA.

E Grid está logo abaixo de Web Services. Ocupa-se dos mesmos problemas e soluções, mas com abordagens mais operacionais. Grid nasceu em um ambiente científico e WS em um ambiente de aplicações de negócios. Reinventaram a roda um do outro diversas vezes. Mas nos últimos anos têm juntado esforços para limpar os overlaps a fim de produzir um único conjunto de métodos e boas práticas.

Tudo isso é Virtualização

Se a virtualização de hardware (Xen, VMWare, z/VM) divide um equipamento em vários pedacinhos, SOA, WS e Grid dividem a aplicação em vários pedacinhos funcionais.

A virtualização de software (SOA, etc.) é mais difícil de fazer. Mas é também muito mais poderosa que a de hardware. Traz benefícios mais consistentes, mais abrangentes (porque tiveram que arrumar a casa dos negócios antes) e de mais longo prazo.

Tudo isso tem a ver com a Web 2.0

Explicar Web 2.0 está fora do escopo agora, mas sua arquitetura tem muito a ver com SOA.

Ao invés de feeds, podcasts e APIs JavaScript da Web 2.0, SOA tem serviços, provedores de dados e de funcionalidades. Equivalente ao HTML, capaz de juntar funcionalidades e dados de diversos sites, SOA tem a Linguagem de Execução de Processo de Negócio (BPEL, que é XML) que define a ordem e dependências ao juntar Web Services para formar uma aplicação maior. O papel das tags e folksonomy da Web 2.0, é exercido pelo UDDI no contexto de Web Services.

Mashups da Web 2.0 (experimente o iGoogle) são as Aplicações Compostas do SOA (veja também na Wikipedia).

E o Enterprise Service Bus do SOA (também na Wikipedia) tem o Browser como seu equivalente na Web 2.0. Sim, porque ambos tem a missão de materializar as conexões lógicas definidas pelo DHTML ou BPEL.

Web 2.0 é a Arquitetura Orientada a Serviços global.

The Blog Icons

This is a collection of high quality vectorial icons to represent common ideas and actions of the blogosphere.

They were based on the SVG work from FeedIcons.com. The base button is the same, but mathematically simplified on the XML level. New buttons were added based on other popular icons found on the web or created by myself. Also some redesign was made for new shapes to make the icons look better when exported to smaller image sizes.

By the way, I am not a designer nor an artist. I just know how to use SVG-creation tools as Inkscape or make good XML. Or I just have a blog demanding for these icons. So I’m sure people can contribute better color mixings an outlines. Let me know and lets integrate your ideas into this project in the right way.

Please share alike this icons. They have a Creative Commons license. I appreciate if you can link to my blog when using them.

Icons for Feed and OPML

Feed IconThese icons where the base for this work, specially the feed icon as found in its website. They were probably created with proprietary tools such as Adobe Illustrator and then exported to open formats such as SVG or PNG. The original OPML icon can be found at opmlicons.com

OPML IconThe versions here are visually identical to the original ones, but mathematically simplified. They are now being maintained in an open format — SVG — here, and are a better option because of its open source code and formats, and distribution.

Icons for Trackback and Share

Trackback and Pingback IconThese icons can be found sometimes in the blogosphere. I don’t know who designed them but they are a good representation of the Trackback and Pingback ideas.

The Share icon is not my preferred but for now it is just a copy of what can be found around.

Share IconColors and shapes are identical and based on the feed icon button. I never saw these icons in a size bigger than 16×16 pixels. Now, in a scalable format, they can be rendered at any size you want.

Permalink IconThese are original creations and come in several options. I am still not sure which one is the best. You can also suggest other shapes.

As you can see, I am using this icon to identify that each section on this post has a permalink.

Other Icons

Comment Icon Edit Icon Cancel Icon Tag Icon Download Icon Clock Icon

Other original icons: Comments, Edit, Cancel, Tag, Download, Upload and Clock (to represent date and time). I’m open to suggestions for better shapes.

Challenges for Icon Sizes

The original design of these icons (from feedicons.com) looks wonderful on sizes bigger than 22 pixels, but most people will use them on small sizes as 16×16. So this package delivers also shape design that look better on small sizes as 22×22, 16×16, etc. I am using these sizes all around my blog as you can see.

Converting the SVG Files into Images

In the Blog Icons ZIP file you will find the XML:SVG source code for all icons. Additionally you will get all icons in PNG (preferred), GIF and JPG formats, in common sizes from 10×10 to 128×128 pixels. If you want a specific size, you can import the source SVG file in some graphical tool as Inkscape (on Linux), or CorelDraw, Adobe Illustrator, etc and export them into any format and size you want.

Or use the Makefile like this (on Linux you will need Inkscape and ImageMagick installed):

Make all default sizes of all icons, in PNG, GIF and JPG:

bash$ make all

Make Feed icon in GIF format, at 40×40 pixel size:

bash$ make SIZE=40 feed.gif

Make all icons, all formats at 40×40 pixel sizes:

bash$ make SIZE=40

O Efeito Online

Estou usando barba a uns 2 anos.

Mas nesse tempo todo não troquei minhas fotos online, tipo a do MSN Messenger, Orkut, etc. No cyberespaço estou sem barba.

Ai, reencontro pessoas que não me vêem a uns 6 meses (as últimas vezes que me viram ao vivo já estava com barba), mas me dizem que estou diferente, que deixei a barba crescer !!

Isso tem acontecido com muita freqüência.

Conclusão: inconscientemente, as pessoas esperam me enxergar ao vivo com a mesma fisionomia que me vêem online.

Como Criar um Website

Este guia é para você que é leigo em computadores, mas que precisa contratar alguém para fazer o site de sua empresa, restaurante, hotel, etc. Vai ajudá-lo a ter um site mais acessível, prático e funcional, usando padrões e técnicas novas e que os usuários gostam, e deixando de lado as técnicas não muito naturais da web, ou que não é de boa prática o seu uso.

Quando for comprar serviços para criar seu site, exija os seguintes pontos (os links levam para as explicações):

  1. Quero um site onde eu mesmo posso atualizar o conteúdo, como se fosse um blog.
  2. Onde hospedar o site, em que computadores ele vai rodar ?
  3. O site/blog não pode ser feito em Flash.
  4. O site/blog deve ser compatível com qualquer browser em qualquer plataforma, principalmente Firefox, Internet Explorer, Safari e Opera.
  5. Não é necessário ter uma animação de abertura.
  6. Não pode haver popups nem frames, deve ser de fácil navegação e usar permalinks semânticos.
  7. O site/blog deve conter informações objetivas e precisas.
  8. O site/blog deve usar tecnologias abertas e não-proprietárias.

Seguem os detalhes de cada ponto…

Não se chama mais site, agora é blog

Blogs estão na moda, então entre na moda.

Não é a toa. Se você disser “entre no blog do meu restaurante” ao invés de “site”, as pessoas sabem que estarão mais próximas de quem criou a informação ali, e não só da informação em sí. Na cabeça das pessoas, um site raramente é atualizado, mas um blog sempre tem novidades. O já conhecido formato de blog sugere que os visitantes poderão interagir, comentar.

Não conte para ninguém, mas site e blog são praticamente a mesma coisa, mas optando pelo formato de blog abre um leque de opções do uso de ferramentas já prontas para facilmente gerenciar seu conteúdo. Isso significa que seu site (ou blog) ficará pronto mais rápido (instantaneamente, na verdade), com mais funcionalidades, nasce bonito, e organizado de um jeito já familiar para as pessoas, além de ser interativo.

Outra vantagem de um blog é que você mesmo vai poder configurar e atualizá-lo tão facilmente quanto escreve um e-mail.

O visual de um sistema de blog como o WordPress é definido pelo tema usado. A idéia de temas pode ser comparada a uma roupa que se veste: troque de roupa e mude seu visual sem tocar no conteúdo, da mesma forma que troca-se o tema de seu blog sem interferir no conteúdo textual etc.

Há uma infinidade de temas gratuitos genéricos prontos na web, mas para uma empresa, estabelecimento, etc o ideal é contratar um webdesigner para criar (ou adaptar) um tema específico, com o seu logotipo e a sua cara. O trabalho técnico para executar esse trabalho dura aproximadamente 1 semana, e no caso do WordPress.org, o webdesigner deve ter conhecimento de PHP, além dos básicos XHTML e JavaScript (não precisa lembrar esses nomes, só garanta que seu webdesigner conhece tais tecnologias).

Em que computadores seu site vai rodar, onde hospedar ?

O custo mensal para se ter um blog/site é baxíssimo. No Brasil pode-se contratar excelentes provedores de espaço como a Insite por aproximadamente R$16 por mês. Já incluso todas as ferramentas necessárias para criar o blog, como o WordPress.org.

DreamHost bannerO provedor que escolhi para este meu site é o DreamHost que fica nos EUA. Por uns R$70 por ano eles me dão 230GB de espaço, mais banda praticamente ilimitada e um ótimo serviço. Alí pode-se rodar um blog WordPress.org, ou outros softwares que facilitarão a sua vida para gerenciar o conteúdo, seja textos, fotos, multimídia, etc: Drupal, Joomla, Gallery etc.

Seu site vai morar em computadores que rodam Linux (por oferecer maior segurança e estabilidade) e seus usuários Linux, Windows, Mac ou qualquer outro poderão navegar nele sem problema.

Evite Flash

Flash é a tecnologia que permite animações bonitinhas em sites da web, mas que começou a ser impropriamente usada para fins mais centrais de alguns sites, até o ponto enlouquecido de o site inteiro ser feito em Flash.

É ruim para seus visitantes: Flash é uma tecnologia proprietária, e nem todos os seus visitantes vão tê-lo instalado. E os que tiverem talvez o terão numa versão antiga (você lembra de ter atualizado seu Flash alguma vez?). Visitantes que usam Linux por exemplo — 20% da web aproximadamente — em geral não tem. Não exclua seus usuários.

É ruim para seu blog: Há uma ciência oculta na web chamada Search Engine Optimization (ou Otimização Para Sistemas de Busca), em que profissionais especializados conseguem fazer um site aparecer no topo da pesquisa por palavras em sites como o Google, Yahoo, MSN Search, etc. Bem, qualquer palavra ou link (isso inclui menus que levam ao texto) contidas em arquivos Flash serão invisíveis ao Google, fazendo seu blog praticamente desaparecer em resultados de busca. Os potenciais clientes que usam o Google e companhia para procurar coisas que você vende também desaparecerão.

Use Flash somente em coisas marginais e mesmo assim em elementos que não interferem na informação que seu site/blog provê.

Existem outros browsers

Lembre-se que o browser que você e seu produtor de site usam pode não ser o mesmo de todos os seus visitantes. O Firefox já usado por uns 30% da web. Para acertar neste ponto, garanta que seu blog é bem visto no Firefox, Safari (popular no Mac), Opera (popular em celulares) e Internet Explorer.

A Internet não é um panfleto de propaganda

Uma das coisas mais inúteis e irritantes de muitos sites é a tal da apresentação inicial, geralmente feita em Flash. Claro que há o link para “pular a animação” mas se este também estiver embutido no Flash pode dizer adeus a alguns visitantes: o resto de seu site é inacessível e contribui para a tal exclusão digital.

Um panfleto é recebido na rua de forma passiva, e a capa deve ser atraente para que o usuário queira abrir e ver o resto. Na Internet é diferente. Dificilmente alguém vai “cair” no seu site por acaso. As pessoas ativamente te clicaram porque acreditam que você tem a informação que elas precisam. Não as aborreça com essas apresentações iniciais. Em suma, isso só serve para duas coisas: dar uma desculpa ao webmaster que você contratou para te mostrar seus conhecimentos em operar o programa que cria aquilo, e gastar seu dinheiro pelas horas de trabalho cobradas.

Use melhor as horas pagas ao seu web-designer e peça para ele criar um site/blog semântico, que os mecanismos são capazes de ler.

Morte aos Popups

Sobre as tais janelas saltitantes que surgem quando clicamos em links de sites mal feitos, saiba que browsers modernos corretamente as bloqueiam. Se você as vê na hora que está testando seu site pela primeira vez, provavelmente foi porque o browser foi explicitamente configurado para deixá-las saltar. Em geral seus usuários não as verão.

Os popups tem outro sério problema: em sites mal feitos, certas informações preciosas só podem ser encontradas dentro de popups, e como essas janelinhas estão fora do fluxo de navegação normal (como Flash) essas informações também serão invisíveis ao Google e companhia, e não aparecerão nos resultados de busca.

Estabeleça a idéia de que todo pedaço de informação em seu site deve poder ser acessível diretamente por links externos (também conhecidos por “permalinks“), e não só navegando via a página principal.

Seus clientes querem te ligar

Você ficará surpreso em saber quantas pessoas tem preguiça de ler ou gastar 5 minutos (ou mais, se o site for desestruturado) navegando em seu blog para encontrar o que procuram.

Para aproximá-las de você, deixe seu telefone com código de área visível em todas as páginas, por exemplo no final de cada uma. Só e-mail não basta. Muito menos formulário para entrar em contato. Lembre-se: de qualquer forma, antes da Internet o único jeito de contactarem seu estabelecimento era por telefone.

Se o seu estabelecimento for um serviço, restaurante, hotel, loja, vai perceber que a maioria liga para saber onde fica, preços, se está lotado, o que há no cardápio, etc. Quando as perguntas freqüentes ficaram óbvias, trate de criar páginas com respostas claras no seu site, mapas interativos como o abaixo, etc.

map
map
Restaurante Maha Mantra
map
Cantina do Mello

Evite tecnologias proprietárias

Use padrões abertos. Eles estão disponíveis, são mais baratos, e te dão mais flexibilidade que as tecnologias proprietárias.

Não é exatamente o webdesigner quem deve escolher as tecnologias usadas em seu site. Ele vai te sugerir as que ele conhece, mas não necessariamente são as melhores para você.

Um site/blog desenvolvido com tecnologias proprietárias te forçará a ter que pagar por elas pelo resto da vida de seu site. E saiba que a cultura da Internet criou diversas tecnologias abertas, muitas vezes melhores, muitas vezes gratuitas, que te dão escolha, poder de negociação, etc.

Veja uma comparação:

Tecnologias Proprietárias (evite) Tecnologias Abertas (prefira)
Flash DHTML, Ajax, XHTML+JavaScript
ASP, ASP.NET JSP, PHP
.NET, C#, Cold Fusion, Delphi etc Java, Java Enterprise ou J2EE
Windows ou qualquer outro sistema operacional Linux
Mídia em formatos WMA, WMV e Real Mídia em formatos MP3, AAC, MPEG e Xvid (ou DivX)

Outros detalhes

  • Seu site ou blog deve usar a codificação UTF-8 ou Unicode. Esta técnica é a garantia de que acentos vão aparecer corretamente em qualquer browser e sistema operacional.
  • Evite também frames. Eles nasceram a partir de um erro de projeto, são considerados obsoletos, tem problemas similares aos popups e Flash, violam padrões, e seus criadores se arrependeram de te-los criado.

Mapas Personalizados no Google Maps

Confira o novo Google Maps, que já era na minha opinião o serviço mais prático e legal da Internet.

A partir de hoje (não lembro de ter visto isso ontem) pode-se criar mapas personalizados com marcadores coloridos e balões com informações formatadas, como este mapa com legendas de Paraty e região.

Além do mais, pode-se exportar essas informações para um arquivo KML, importável no Google Earth. Mas como KML é um idioma XML aberto, pode-se usa-lo como meta informações geográficas em quaisquer outras aplicações. A imaginação do desenvolvedor de aplicações é o limite. Discretamente, KML irá se tornar um padrão aberto e universal para descrever metainformações em mapas.

Havia desenvolvido um plugin para WordPress (ou qualquer outro sistema de blog, ou página simples) para embarcar mapas interativos dentro de posts, capaz de incrementar posts como este (na verdade, a maioria de meus posts sobre viagens tem mapas interativos). Ele ainda é muito prático, porque a API do Google Maps ainda não provê um serviço para desenhar os novos mapas personalizados fora do próprio Google Maps. Mas duvido que isso demore a acontecer, e quando acontecer, das duas uma: ou o plugin vai ficar muito mais simples, ou ele vai se tornar completamente obsoleto.

Eu sou tão fascinado por mapas que provavelmente fui um cartógrafo em outra encarnação.

E para quem não sabe, o Google Maps e o GMail são os sites populares que primeiro usaram os conceitos de AJAX.

Inclusão Digital

Já posso desencarnar feliz porque tenho um blog popular.

Meu post sobre Aquecimento Global é o campeão de audiência com 246 comentários neste exato momento, mas se você for verificar agora, o número já deve ter crescido. Até o final do ano deve facilmente chegar a 400 comentários.

Escrito numa noite mal dormida, de pesadelos, após ter assistido o filme do Al Gore, nunca tinha imaginado que seria tão visitado, e nem por esse tipo de público: a maioria são estudantes fazendo trabalho para a escola.

Uma conhecida que corrige redações de vestibular me disse uma vez que o nível dos textos é muito baixo. Confesso que achei que ela estava exagerando e sendo pessimista demais, mas minha opinião mudou depois do meu post popular.

Veja alguns comentários ali:

E a lista não pára…

A inclusão digital está acontecendo mais rápido do que qualquer outra inclusão.

Aproveitando, meus outros posts populares são o de download de música, o do Google Maps para WordPress, e o do tema do meu blog.

My Podcasts

A podcast is a blog that, in addition to text, also publishes media files. So you need a special “reader” to listen them, so people use softwares like iTunes, Amarok, iPodder to subscribe and automatically get the media.

I’m officially releasing my podcasts here, posting songs in high quality MP3 format. These are the channels, subscribe using the orange buttons below:

Enjoy.

Sobre Podcast

Uma vez perguntei a um amigo o que é um podcast, e ele disse que é um MP3. Bem, isso é tão minimalista quanto dizer que um Gaudí é um amontoado de tijolos, ou que a Internet é uma porção de bits dançantes.

Um podcast é um blog não-textual. Seu conteúdo pode ser audio e/ou vídeo, rodeado por metainformações do tipo “autor”, “entrevistado”, “banda”, “estilo”, “sumário” etc.

Como todo blog, ele tem regularidade: “episódios” no lugar de posts e assim por diante.

Você “assina” um podcast como assina uma revista, da mesma forma como assina um blog (via RSS ou ATOM). Mas como um browser é um leitor essencialmente textual, é mais comum e prático assinar podcasts usando softwares de mídia: iTunes, Yahoo! Music Engine, Amarok, etc.

Na convergência das coisas, um podcast pode ser comparado a um programa de rádio onde o próprio ouvinte decide quando e como vai ouvi-lo.

Num mundo onde tivermos banda larga no ar tão abundante e livre quanto ondas de rádio, além da memória para freqüências de estações, os rádios de nossos carros terão também a assinatura de nossos podcasts preferidos. Com ainda não chegamos a isso, temos que usar MP3 players modernos como o iPod – que tratam podcasts de forma especial – para termos essa funcionalidade.

E nesse mundo, os podcasters seremos você e eu, pessoas comuns falando diretamente para o mundo. Publicar um podcast é tão simples quanto publicar posts num blog. É inclusive algo que se pode integrar com plataformas de blogs comuns, com plugins para WordPress, etc.

Se você tem um fluxo de coisas para dizer, crie um podcast. Se você tem um fluxo de coisas para serem assistidas, crie um podcast. Se você tem um fluxo de coisas que quer que as pessoas ouçam, crie um podcast. Este último é o meu caso, sobre Jazz Brasileiro, e por isso estou juntando os pedaços e os módulos para criar um.

Andei estudando isso ultimamente, e achei importante compartilhar…

Google Maps Plugin for WordPress

This software will let you easily render Google Maps anywhere on your blog as a web service. It also includes code for easy integration with WordPress blogs, but what the code does best can actually be used with any other blog system or plain web page.

This plugin will let you easily create from simple maps with one marker and a text balloon, to complex multimarker maps with hypertext balloons as this page.

Installation on WordPress Blogs

Install it as any other plugin (unziping plugin files under [WORDPRESS_ROOT]/wp-content/plugins directory and activate it in WP Plugins admin tool). Then go to the Google Maps API key signup page, get an API key for your website, and install it in the plugin’s admin page under Options.

Google Maps WP admin page

Creating Simple Maps

This is the easy part.

  1. Go to Google Maps, find the spot you want to show, select Map, Satelite or Hybrid view buttons, double-click on the most important point on the map to centralized it, and define the zoom factor you want.
  2. On the left-top corner of the map, click on the “Link to this page” link, and copy your browser’s location to the clipboard. You can do the same for complex maps created on the My Maps section of Google Maps website.

    Link selection

  3. While creating the post, select the text that will be displayed on the map marker, and create a link with it.

    Select text for the map's mrker

  4. Paste the map URL on the Link URL field, and on Title write “googlemap“.

    Link creation dialog

  5. Continue editing your post and publish.

You are done. This example will render a map like this (don’t forget to click on the marker to see the balloon):

TuxThis will be a map’s marker text with an image.

Passing Parameters

You may have noticed that on the Title field above we used other commands. In fact you can use the following switches, separated by “;” to control the way the map will appear in your site.

googlemap
Instructs the plugin to transform this link into a Google Map area. If not used, the plugin will not work on the link and you’ll get a plain link to the Google Maps site.
nocontrol or nocontrols
Renders a map without the zoom and scale controls
nomarker or nomarkers
Renders a map without the marker with the information balloon.
w:SIZE_IN_PIXELS and h:SIZE_IN_PIXELS
Defines the size of the map area in pixels.
w:PERCENT% and h:PERCENT%
Defines the size of the map area relative to full width and height.

Since other plugins may use the title attribute, you can also put these commands in the rel attribute and activate this functionality in the plugin configuration dialog.

Some examples for the Title (or rel) field:

googlemap
Renders a map with controls, marker an default sizes, as specified in the plugin’s admin page, under WP Options.
googlemap;nocontrols;w:300;h:200
Renders a 300×200 map with marker but no zoom controls.
googlemap;nomarker;nocontrols;w:100;h:100
Renders a small 100×100 map without marker and zoom controls.
googlemap;nomarker;nocontrols;w:100%;h:300
Renders a maps that fills the full width available with a 300 pixels height, without markers and zoom controls.

Creating Complex Maps

This procedure requires some HTML knowledge, but will let you create maps with multiple markers, and results as good as on this post.

The proccess consists of creating a definition list (<dl> XHTML element) of a center point and markers with their text balloons.

Learn by example. Pay attention to the following complex map, and select all its markers to see the text inside their balloons:

Center of map
map
Center of São Paulo
map
Flea market
map
Traditional market
balloonless marker
map
Japanese town

It was generated by this (X)HTML code:

<dl title="googlemap;w:100%;h:400">
	<dt><a href="http://maps.google.com/?z=15&ll=-23.550887,-46.631985&om=1">Center of map</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.550592,-46.633122">map</a></dt>
	<dd><strong>Center of São Paulo</strong></dd>

	<dt><a href="http://maps.google.com/?ll=-23.547563,-46.631041">map</a></dt>
	<dd>Flea market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54535,-46.627693" title="marker">map</a></dt>
	<dd>Traditional market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54715,-46.637263">balloonless marker</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.555195,-46.635547" title="marker">map</a></dt>
	<dd>Japanese town</dd>
</dl>

So the structure must folow these rules:

  1. Create a definition list (<dl>) and put map-related commands and parameters on title= attribute as specified above.
  2. First definition term (<dt>, first green line) must contain only a link to Google Maps site, to define its center and other map parameters. The text for the link is ignored when a map is generated, so use a text like “Center of Map” so people accessing your posts outside your blog (for exemple, through feed readers) will have a clue what is this link for.
  3. The rest is a pair of terms and definitions (<dt> and <dd>) with the marker position (as a Google Maps URL) and the text on the balloon respectivelly.
  4. You can create a balloonless markers specifying only a <dt> without a <dd>.
  5. Whatever you put inside the <dd> block will appear inside the balloon. Put links, images, lists, tables, etc.

Using Google My Maps or KML and GeoRSS maps

You can use Google My Maps service to create and manage colorfull markers, paths, regions and the text inside the balloon, and simply use the “Link To This Page” link to embed the map in your page as described above.

The plugin will use the KML-exported version of your map to create the balloons, markers, regions and paths. Simply exaplained, KML is XML dialect that contains all meta information of your maps: markers positions and images, line colors, balloon texts, etc. You can create KMLs with tools like Google Earth, Goole Maps or even using a plain text editor. GeoRSS format is also supported but can’t be used for paths, regions and markers colors, only plain geographical positions.

The good news is that you can embed KML-maps from any source, and not only from Google My Maps. You can upload a KML file to your web server and pass it to the plugin to render it. Here is an example on how to do it in a more advanced way:

<dl title="googlemap;w:100%;h:400" id="my-wonderful-map-with-kml">

	<dt><a href="http://maps.google.com/?z=7&ll=-23.550887,-46.631985&om=1">Center of map</a></dt>

	<dt><a title="kml" href="http://my.server.com/spots-on-the-farm.kml">markers</a></dt>

	<dt><a title="kml" href="http://my.server.com/spots-on-the-beach.kml">more markers</a></dt>

</dl>

This example will render a map centralized on geo position -23.550887 -46.631985 and overlay it with two KML specifications: spots-on-the-farm.kml and spots-on-the-beach.kml. Note the required title=”kml” parameter that indicates to the plugin that this is KML or GeoRSS overlay and not a plain marker position.

Positioning and Style Possibilities

To have better control over the map positioning and overall look, you can manually edit the HTML code while posting, including style and class attributes. Find the <a> or <dl> tag for your link and use this examples to get some clues:

  • <a style=”float:left; width:300px; height:300px;” title=”googlemap”
    Renders a 300×300 map floating on left of the paragraph. See example.
  • <a class=”photo” style=”float:right;” title=”googlemap”
    Renders a map with default dimensions floating on the right of the paragraph, with style class photo, that in my theme defines some margins and borders.
  • <dl style=”visibility: hidden;” title=”googlemap”
    Using style=”visibility: hidden” will make the browser hide the map definititon text while loading the page. Seconds later, when the plugin renders the maps on your page, the hidden blocks will finaly appear as maps.

The HTML attributes id=, style= and class= you specify will be inherited by the generated map.

In addition, a CSS class called map will be added to all maps, and to all balloons a CSS class named balloon will be assigned. This way you can define your own style for these elements.

Troubleshooting

Some common problems people have, and solutions.

  • Map does not appears or appears on a different geo locationMake sure the Google Maps URL you are pasting is correct and complete. A correct URL must have the following parameters: ll= required to define latitude and longitude for center of the map or a marker, om= option to show or not the overview map on bottom-right, z= required to define the initial zoom factor, t= option to define if map is plain, satellite or hybrid, msid= required if you are pasting My Maps from Goole Maps website.
  • Problems with &You should not have problems with & chars being modified by the WordPress editor. If so, it means you are working with complex maps. Yes, WordPress WYSIWYG editor sucks a little bit. So if you are working with complex maps, you should switch to the plain text editor. You can’t just open the post editor in WYSIWYG and select the plain text editor after that. The mess was already done. You will have to edit your profile under Users->Your Profile and deselect the “Use the visual editor when writing” options when you edit that post. Once it is saved you can reselect it again.
  • Grey area instead of markers, or simply don’t have markersGoogle Maps API uses a lot of CSS style to render its maps on your page. This problem is caused by a conflict between CSS needed by Google Maps and your page or theme defined style. Use Firefox’ DOM inspector to drill down into your document structure until you find the markers XHTML nodes. Then switch to CSS Style Rules mode on the inspector, then select a rule that was defined by your theme, on the top-right box, then delete “background-” related properties on the bottom-right box, one by one, until the marker appears. This will indicate you which property you have to delete from your theme’s or own style.css file.
  • Problems displaying the map on IE7

I still don’t know what is the problem here. I rarely use Windows nor IE, so I can’t reproduce it. This is probably caused by the same CSS conflict above. If you can correctly see the map on this page with IE7, indicates that the problem is specific to your page and related stylesheets. You must debug your CSS styles.

No WordPress ?

If you use other blogging systems, or just want a simple way to create maps on your pages you can still take advantage of this plugin.

Download the plugin, unzip, install its content somewhere on your server accessible from the web. Then edit the HTML source of the pages you want to render maps, find the <head> block, and include the following code inside of it:

<!-- Google Maps Plugin (begin) -->
<!-- http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html -->

<!-- Google Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=MY_API_KEY" type="text/javascript">
</script>

<!-- Google Maps Plugin logic -->
<script src="http://my.site.com/path/to/plugin/googlemapsPlugin.js" type="text/javascript"></script>

<!-- Google Maps Plugin initialization -->
<script type="text/javascript">
	//<![CDATA[

	MapPluginInit(
		/* Default maps width  */          500,
		/* Default maps height */          300,
		/* Use rel instad of title? */     false);
	//]]>
</script>

<!-- Google Maps Plugin (end) -->

Change the red parts to fit your needs. Every page containing the above block will be able to render simple and complex maps as described.

About

This plugin was inspired on Macdiggs Google Maps plugin, but was completely redesigned, rewritten, has much more functionality, made more user friendly, has cleaner code and is more standards oriented. The former Macdiggs’ plugin will not receive updates anymore so this is the plugin you should be using.

Soleil Theme for WordPress

Soleil screenshot

The Soleil theme for WordPress was based on the original creation and colors by designer Carrie Petri for other blog systems. I just mixed the PHP code and some technical ideas thowards what a blog system should be.

Althought it looks really good, Soleil is way more than eye candy. It is unique due to this main features:

  1. Localized on demand
    The blog generic control strings will appear in visitor’s language that he set on his browser. Also, all blog-specific strings as category names, post titles and personal links may have hooks for personal localizations. See bellow how to activate this feature.
  2. Widgetized sidebar
    Soleil provides all its sidebar content as widgets. If you use the WordPress Widget Plugin, you’ll be able to visually rearrange the sidebar and also visually use more widgets from a vast network of developers.
  3. Very friendly to feed readers
    Every aspect of a Soleil blog provides clear and intuitive links and icons to its feed version. Categories archive pages, comments, list of categories on the sidebar, etc. Browse my blog to see what I’m talking about.

All artwork was completely redrawed in CAD systems and in OpenOffice.org Draw to improve images quality. The vector files are included.

Other benefits of this theme are:

  1. Shiny and vibrant colors, thanks to Carrie.
  2. Certified to work on Firefox 2, IE 6 and Konqueror. This gives a clue it will look good in any other browser.
  3. Efficient, yet well balanced use of the entire screen.
  4. Intuitive icons for reply, trackback, blog, post and category feeds, etc.
  5. Clear visual separtion between each post, each comment, etc.
  6. Shows number of comments in evidence.
  7. Direct links to post and comment editing (for administrator only).
  8. Includes a style for printing that hides parts of the page irrelevant to this media.
  9. Provide list of links with icons to popular feed readers.

Download the theme archive, unzip it in your [WORDPRESS_ROOT]/wp-content/themes directory, and select it in the Presentation tab of your WordPress admin interface. Organize the sidebar widgets (if you use the recomended Widgets Plugin) on the admin interface, Presentation -> Sidebar Widgets.

Soleil Predefined Style Classes

Soleil provides some CSS classes that I heavily use in my posts:

photo
To be used on image tags. Add margins, padding and a slim border. Use it like this:

<img class="photo" style="float right" …
command
From the docbook series and for technical writers, renders a computer command in evidence. Use it like this:

<span class="command">ls -al</span>
programlisting and screen
From the docbook series and for technical writers, renders a box with special fixed size font as a computer output or programlisting. Adds scrollbars if content is too wide, to not breake your layout. Usage:

<pre class="programlisting"> 
	// sourcecode of a program 
	code { 
		Some code 
	} 
</pre>

or

<pre class="screen"> 
	bash$ ls -al 
</pre>
filename
From the docbook series and for technical writers, renders a filename in evidence. Use it like this:

<span class="filename">/bin/kdb</span>
xmlbutton
An XML button maker, the one very popular on blogs etc. To get a button like My XML button, use as:

<a class="xmlbutton" href="http://someplace">My XML button</a>
articleinfo
Creates a nice may-be-floating box for you to show some information about the post. The box will appear in evidence but outside the stream of the text. See an example on this post. Usage:

<div class="articleinfo" style="float: right">Some info about this article.<div>

You should also use <h4> as the header for subtitles inside posts.

Displaying Links Correctly on Sidebar

Many blogs that use Soleil have their links looking bad on their sidebar. To fix this, you should go to your blog admin interface, select Links->Link Categories and edit each link category’s properties in a way that each item will be wrapped into an HTML <li> tag.

For example, my blog categories have Before Link: <li> and After Link: </li>

Soleil Localization and Internationalization

Soleil’s default language is english, and is currently localized to portuguese.
To localize Soleil to you language, go to soleil/languages and copy the theme-pt.po (portuguese language) file to theme-YOURLANGUAGECODE.po and edit it to fit your language needs. The file format is very intuitive and it contains all generic messages the theme uses.

You can also localize your blog specific strings as your category names, blog name, blog description, and even some posts titles. For this you have to edit personal-YOURLANGUAGECODE.po in the same way.

To compile a .po file, on Linux do this:

bash$ msgfmt -c -v -o theme-YOURLANGUAGE.mo theme-YOURLANGUAGE.po 
bash$ msgfmt -c -v -o personal-YOURLANGUAGE.mo personal-YOURLANGUAGE.po

The .mo files must be located under soleil/languages/ while the .po don’t have to be under your blog installation, live them in your PC only.

To activate on demand localization based on visitor’s prefered language, ensure your wp-config.php file contains this:

define ('WPLANG', substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));

Enjoy.

Migro meu Blog para o WordPress ?

Hoje sou um relativamente feliz usuário do Blogger, do Google. Mas me faltam coisas como categorizar posts, mais controle sobre os posts e comentários, etc.

Muita gente usa o WordPress, e queria saber: migro p/ o WordPress ou não ?

Vocês usam o WordPress no WordPress.com mesmo (com configurações limitadas), ou baixaram o software de WordPress.org e insatlaram no site de vcs ?

Não vi forma alguma de usar o serviço do WordPress.com e ter o blog no meu domínio. É isso mesmo ?

Tentei fazer testes de importação dos posts e comentários do Blogger, e não consegui: deu pau com mensagens estranhas. Confere ?

Onde há um diretório de templates PHP supimpas para escolher ?

Obrigado pelas dicas !

Converting YouTube to MPEG or iPod

In the end of this proccess you’ll have an .mpg file on your local disk, generated from an Internet-only YouTube URL.

First make sure you have ffmpeg (video encoding and decoding tools) and lame (MP3 audio encoding and decoding tools) softwares and dependencies installed on your system. You will also require the youtube-dl scripts that downloads the actual YouTube video.

In a Red Hat or Fedora system you can install it from Dag or Livna RPM repositories, with a simple yum command:

bash# yum install ffmpeg lame youtube-dl

Then you get to the YouTube video page you want to download. In this example we’ll use the Heist video, the first Linux ad from IBM, that has http://www.youtube.com/watch?v=DO9ZWDaLLxA as its URL.

I’ll use youtube-dl this way:

bash$ youtube-dl -t http://www.youtube.com/watch?v=DO9ZWDaLLxA

And I saw it connecting to YouTube several times and downloading the video. In the end, I found a big file named the_heist-RRZyz1vXkPE.flv in the current firectory, which is the video file.

Now lets convert it into MPEG with ffmpeg:

bash$ ffmpeg -i the_heist-RRZyz1vXkPE.flv -acodec copy -sameq heist.mpg

-acodec copy will cause ffmpeg to copy the audio from input to output file, while -sameq causes the output video quality to be the same as the source, but output file will be very big. For YouTube videos, you can use -b 320000 instead of -sameq to get smaller file sizes.

I saw ffmpeg taking some time to convert, and in the end I got the heist.mpg file which I was able to confortablly play in any MPEG aware video player, as mplayer.

If you want to convert the video file into MP4, which is the format supported by iPod Video players, you just change the extension:

bash$ ffmpeg -i the_heist-RRZyz1vXkPE.flv -acodec copy -b 320000 heist.mp4

Ffmpeg will take care to use the maximum screen size available from the source (the .flv file) so the converted file will be as hi-fi as YouTube let be (not too high really).

Enjoy your video.

Inline Blogger.com Comment Form

  • WARNING: This script is not being supported anymore since I moved to a much better blogging system with WordPress.

If you don’t want your blog visitors to be redirected to blogger.com website just to write a comment for your post, you are in the right place.

This page will show you how to include a comment form directly into your post page, just as you can see in this very page, bellow. After installing this solution in your blogger.com blog you’ll feel an instant increase in the number of comments people write for you, because a comment form right in the face of your visitor is way more intuitive and inviting tsule with nowadays blogger.com interfaces, and stepped out from a hack status into a clean, functional and well documented solution.

PLEASE, write a comment here, including a link to your blog so people can know who else is using this solution.

PLEASE, do not make test in this post. PLEASE, leave it for real comments or support questions. PLEASE, use this post to test the form.

Installing

  1. Download this script and make it available somewhere on your website, for example from the URL http://my.website.com/resources/bloggerCommentForm.js (this is the URL we’ll use in our examples).
  2. Edit your blogger.com template and look for the end of the HTML header marked by the </head> tag.
  3. Right before the header ending include the following piece of code in a way that everything will look like:
    <ItemPage>
    <script type="text/javascript" xsrc="http://my.website.com/resources/bloggerCommentForm.js"  >
    </script>
    
    <script type="text/javascript">
    // Lets configure the comment form a little bit
    
    // Include some style
    commentFormStyle();
    
    </script>
    </ItemPage>  </head>
  4. Now you’ll have to place a call to a JavaScript method that will render the form. Scroll down and look for the section on your template that renders the comment. It starts with a <div id=”comments”> tag. This code should be included right after it:
    <a name="postcomment"></a><h4>Write a Comment</h4>
    
    <script type="text/javascript">
    commentForm('<$BlogItemCommentCreate$>');
    </script>
  5. Save your template and republish your blog.
  6. Visit one of your posts page, see if the form appears, and try posting some different comments as different users.

Configuring the Form

You can configure the form, specialy for internationalization, in a very clean way without having to change the code. For example, look how it looks in a brazilian portuguese blog post.

  1. For that, edit your template again and look for the script initialization part you just included in the <head> section.
  2. You can define some JavaScript variables that will define the form language and other parametrizations. Copy and paste these defaults to start translating:
    <script type="text/javascript">
    
    // Lets configure the comment form a little bit
    
    // Include some style
    commentFormStyle();
    
    // General parameters
    var labelWidth = 80;
    var bloggerFormActionURL="http://www.blogger.com/login-comment.do"
    var confirmBeforePost = true;
    
    // Language defaults
    var bloggerUserLabel = "Blogger.com user";
    var otherUserLabel = "Other";
    var customUserLabel = "Name or nickname: ";
    var urlLabel = "URL: ";
    var anonLabel = "Anonymous";
    var rememberLabel = "Remember Me";
    var postedByText = "Posted by";
    var commentButtonText = "Post Comment";
    var previewButtonText = "Preview";
    var previewWindowTitle = "Comment Preview";
    var confirmText = "Post this comment?";
    var boldButtonText = "B";
    var italicsButtonText = "I";
    var linkButtonText = "Link";
    var linkPrompt = "Link Text:";
    var urlPrompt = "Link URL:";
    var quoteButtonText = "Quote";
    var quotePrompt = "Use your mouse to select the text"+
    " in the comment you want to quote.n"+
    "Then press the quote button.";
    </script>

Additionally, you may want to change the target links in your template to make them point visitors to the comment form in the post page. For example, I have the following piece of code in my template that renders each post footer:

<p class="post-footer">
<em><$BlogItemDateTime$></em> |
<a xhref="<$BlogItemPermalinkUrl$>"
title="permanent link">permalink</a>
<BlogItemCommentsEnabled>
<a class="comment-link"
xhref="<$BlogItemPermalinkUrl$>#postcomment"><$BlogItemCommentCount$>
comments</a>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a class="comment-link"
xhref="<$BlogItemPermalinkUrl$>#links"  >links to this post</a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>

This script is free and licensed under the LGPL.
Enjoy.

Baixando Música da Internet

É muito controverso se é ilegal ou não baixar música da Internet. A lei e licença de uso do fonograma (faixa de um CD) ou não é clara ou ninguém nunca explicou isso direito.

Permalink desta parte Entenda o Contexto Primeiro

Outro dia conversei com um músico profissional que fazia faculdade de produção musical, e ficaram claros alguns aspectos:

  1. As grandes gravadoras prestam um serviço para a sociedade desta forma: encontrando talentos, patrocinando a produção e gravação do fonograma, produzindo um encarte bonito, divulgando o produto na TV, rádio, revistas, outdoors e novelas, e depois operando a logística de distribuição física do CD, além de em paralelo investir na própria evolução da tecnologia do CD, tudo isso para você poder ouvir música de alta qualidade técnica, e fácil de encontrar na loja perto da sua casa. Então nada mais justo que as gravadoras serem remuneradas por todo esse trabalho.
  2. Por isso, em geral a gravadora é dona do fonograma, e não o músico ou compositor. Isso significa que é ela quem decide quando, quanto e como vai publicar as canções (publicar significa prensar CDs e por nas lojas). O músico não pode pegar o fonograma, gravar um CD e sair vendendo, a não ser que ele compre os direitos sobre o fonograma, que são em geral muito caros.
  3. As gravadoras não estão defendendo os direitos dos artistas, mas seus próprios interesses. De fato, muitos artistas não gostam que as gravadoras digam que estão defendendo os direitos deles.
  4. Nesse processo todo, os músicos ganham os direitos autorais (que segundo alguns músicos que conheço, é pouco), que recebem de uma instituição independente, que por sua vez vem da gravadora e de outras fontes. Essa regra não vale para estrelas que tem poder (e agentes) para negociar contratos melhores com uma gravadora.
  5. O músico quer que sua arte seja conhecida e ouvida o máximo possivel.
  6. Músicos profissionais ganham mais dinheiro em shows e performances ao vivo, e menos em venda de CDs das gravadoras, que levam a sua obra.
  7. Pessoas só vão prestigiar os músicos num show (e pagar ingresso) se sua obra for boa e conhecida.
  8. Muitos bons artistas não tem penetração no mercado, dinheiro ou disposição para gravar um CD independente. Esses são os chamados “alternativos”.
  9. Excelentes músicos e lindos fonogramas podem ser pouco conhecidos ao ponto de ser comercialmente inviável dar-lhes espaço numa concorrida prateleira de loja de discos. Por isso é dificil encontrar gravações antigas ou as chamadas “alternativas” nas lojas: ou as pessoas já mudaram de gosto, ou há pouquíssimos compradores. A situação é pior para as gravações que são ao mesmo tempo antigas e alternativas.
  10. Eu estimo o custo de 1 CD — incluindo o plástico, encarte, trabalho artístico, pagamento do direito autoral, veiculação etc — em menos de R$5.
  11. Ouvi dizer que a lei proibe a redistribuição de fonogramas em meio físico (gravar um CD ou fita e sair vendendo ou comprando).
  12. A Internet não é considerada um meio físico. Por isso, nesse raciocínio, não é proibido usar a Internet como meio de distribuição de música, pelo menos para fonogramas produzidos/gravados/publicados antes da era Internet, o que inclui tudo antes de mais ou menos 1997. Depois disso, fonogramas começaram a ser produzidos com uma licença (os termos legais que definem o que é permitido ou não fazer com o fonograma) revisada que incluia a Internet — junto com CDs piratas, fitas caseiras, etc — como um meio ilícito de distribuir música direta e livremente.

Seja como for, baixar música da Internet leva tempo, vem sem o encarte — que conté muita arte gráfica e informações valiosas e é controverso se é ilegal ou não. Por outro lado, já foram vistos artistas e suas discografias completas disponíveis ao ponto de parecer irracional não baixar.

Você decide se vai seguir o que a mídia diz defendendo seus interesses — e não a dos artistas —, ou se vai prestigiar um músico e sentir tudo o que seu potencial criativo pode fazer com suas emoções.

Permalink desta parte Como Baixar: Método Fácil

Há diversos blogs em que amantes da música publicam albuns completos para serem facilmente baixados através de serviços como RapidShare, 4Shared, Badongo, etc. São geralmente albuns antigos, raros, que não se acha em lojas. Coisa de colecionador.

Os albuns vem geralmente comprimidos no formato RAR, que é um tipo de ZIP, e é necessário o software da Rar Labs para descompacta-los.

Segue uma lista de alguns blogs:

Na barra lateral desses blogs há sempre uma lista de links para outros blogs similares, então este método é de difícil procura, mas de fácil download. O método de BitTorrent abaixo é de procura mais fácil, mas de download mais complexo.

Permalink desta parte Como Baixar: Método Mais Eficiente, com BitTorrent

Abri espaço neste blog para um conhecido relatar como se faz. Este método usa a tecnologia Bit Torrent e estes são passos para usa-la com sucesso:

  1. Baixe e instale algum cliente Bit Torrent como o BitComet (só para Windows) ou o Azureus (Mac, Linux, Java, Windows). Estes softwares são seguros, não instalam spyware nem virus, e seu uso é totalmente legal.
  2. Use o site www.isohunt.com para procurar músicas por nome, artista, etc. Ele pode ser usado também para procurar outros tipos de arquivos. Você pode também procurar na Internet por outros sites the provem “torrents”.
  3. Procure por, por exemplo, “Mozart” ou “Bach“, etc (clique nesses links para ver um resultado de busca do exemplo).
  4. Você vai encontrar coleções completas de artistas, etc e arquivos muito muito grandes, que as vezes demoram dias para baixar. Os primeiros resultados que ele mostrar são os downloads mais ativos, e por isso mais rápidos para baixar.
  5. Selecione o ítem que você quiser, ele vai se expandir, e então clique no link chamado “Download Torrent” para começar a baixar.
  6. Isso vai disparar o programa de Bit Torrent (BitComet ou Azureus acima), que vai te perguntar onde você quer gravar o download. Escolha um diretório que você vai lembrar depois.
  7. Antes de dar OK, você pode ver a lista (enorme, se for coleção completa) de arquivos que serão trazidos, e pode selecionar para baixar só os arquivos que te interessam, ou tudo.
  8. Monitore a atividade do download e garanta que você está baixando em boa velocidade. Se estiver constantemente muito lento (pode haver períodos de maior lentidão), é melhor cancelar e procurar outro download.
  9. Mesmo baixando muito rápido, um download grande pode demorar dias para se completar.
  10. Depois de terminar o download, se você usa Linux, use o Musicman para organizar seus MP3.

Seja responsável e boa sorte !