terça-feira, 26 de fevereiro de 2008

Instalando o XP no EeePC (Tradução)

UPDATE 02/02/2010: Vejam esse método também!

Recentemente um colega comprou um EeePC da Asus e me perguntou como instalar o XP nele, então procurando na internet achei um how-to legal e já que ia tentar ensinar a ele a usar, resolvi traduzir e disponibiliaar para a comunidade brasileira.

-----

Instalando o XP no EeePC - Uma tradução/adaptação do post original de Ross Carlson mantenedor do blog Jasbone's Thoughts.

-----

Como eu tinha prometido em meu post de ontem sobre como eu amo meu EeePC agora com XP instalado eu quero divagar essa pequena sessão de como eu fiz. Não é difícil mas precisa de algum planejamento e um pouco de trabalho. Dedico uma grande parte deste trabalho a esse post que me ajudou a iniciar.

Pré-requesitos

- Uma pendrive, de no mínimo 1GB.
- Um cartão SD, de no mínimo 16MB.
- Um CD de instalação do Windows SP2
- O software Physdiskwrite (faça o download aqui)
- A imagem do disco de boot (faça o download aqui)
- Um segundo PC com um leitor USB de cartões SD para fazer a configuração acima.

Criando o disco de Boot

Primeiro nós precisamos fazer nosso SD card ser "bootável", então n'soprecisamos ir para o modo DOS e iniciar a instalação do XP. Para fazer isso extraia o physduskwrite.exe para uma pasta no seu PC. Coloque o wxpboot.ima na mesma pasta e insira o seu cartão SD no seu PC. Vá até o diretório e digite:

physdiskwrite -u wxpboot.ima

AVISO: Tenha certeza que você escolheu o número do drive correto quando estiver fazendo isso (ele foi 1 pra mim), se você escolher errado ele limpará todo o seu sistema, isso é muito ruim, então tenha muito cuidado nessa parte. Esse processo tomará somente alguns segundos.

Copie o XP para o pendrive

No próximo passo você precisa inserir sua pendrive no seu PC juntamente com o CD do XP SP2. Copie o diretório i386 do CD para a raiz do seu pendrive.

Iniciando a instalação

Uma vez que você tenha o XP no seu pendrive, insira o pendrive na porta USB do seu EeePC (do lado que tem somente uma (1) porta USB - tenha a certeza que é mostrado como a letra D: depois). Coloque o cartão SD no EeePC e ligue-o. No boot pressione F2 e entre na BIOS - você precisa alterar "OS Installation" para "Start". Pressione F10 e saia da BIOS e reinicie o sistema. Agora será mostrado o boot à partir do cartão SD e em seguida chamará o prompt C:.

Agora você precisa particionar o seu EeePC usando o Fdisk, então no prompt de comando digite fdisk e pressione enter. Você precisará apagar todas as partições do disco (TODAS elas, incluindo as non-DOS). Uma vez que você tenha deletado todas, você precisará criar uma partição primária que será todo drive. Agora saia do fdisk e então nós formataremos o drive com o comando "format c: /s" (the /s torna o disco "bootável" para nós).

Instalando o XP

Aogra que você já tem tudo formatado você pode está pronto para iniciar a instalação do XP. Se você colocou o pendrive corretamente na porta ela será mostada como o dirve D:, então tudo que você precisa fazer é alternar para esse drive e então entrar no direrório i386. Uma vez digitado "winnt" será iniciada a instalação do XP. Na minha máquina eu estou usando um leitor de cartões USB bem antigo com um cartão MiniSD de 2GB para iniciar a instalação. A primeira parte da instalação será a cópia dos arquivos, isso demora uns 15 minutos se me lembro bem. A próxima parte demora um pouco mais.

Finalizando a instalação

E aí, enquanto tempo foi feito? Isso toma um bom tempo, eu aproveitei para jantar, dormir, tomar banhom ir ao trabalho, comer, dormir, tomar banho, ir ao trabalho - então finalmente terminou a primeira fase da cópia dos arquivos de instalação do sistema. Precisei de 48 horas para fazer isso no meu sistema! Eu não tenho certeza exatamente, mas boas notícias para as próximas fases são mais rápidas, menos de uma hora se não me engano.

Drivers

A última coisa que você precisará fazer quando a instalação terminar é isntalar todos os drivers do XP. Felizmente a Asus já provê isso, eu penso que é sofrido uma companhia não vender o XP diretamente na caixa. Inferno, eu não consigo pegar os drivers facilmente para o Alienware, aqueles com o Windows! Então vá à pagina de drivers da Asus e faça o download. A única coisa que não conseguir fazer funcionar foram as chaves da função volume, relamente não sei porque.

Conclusão

Estou esperançoso, pois uma vez usando o XP no EeePC ele trará muito mais benefícios pra você. Eu não quero diminuir o Linux, mas pra mim não é uma plataforma usável. Eu estou deslumbradi como o EeePC roda bem o XP, se o teclado fosse um pouco maior eu penso que usaria ele como meu principal dispositivo em casa (por enquando só quando faço coisas pequenas)

Bem feito Asus, bem feito.

-----

A tradução acima necessita de ajustes, visto que essa é uma das primeiras traduções que faço para tentar aprimorar meu Inglês
. Se você quer contribuir melhorando essa tradução deixe um comentário ou envie um email para jackson.pires [at] gmail.com.

Desde já eu agradeço sua contribuição.

segunda-feira, 25 de fevereiro de 2008

Impressora HP 6540 - Horrível !!! - Não comprem!!!

A alguns meses atrás subtituímos aqui na empresa algumas impressoras - ditas velhas - pelo modelo Deskjet 6540 da HP.

O resultado disso foi quem em menos de 6 meses temos 5 impressoras quebradas. Isso mesmo, todas com o mesmo defeito.


O defeito de todas elas é que tem uma peça de plástico junto ao "carro de impressão" que quando vai ser trocado algum cartucho acaba quebrando do nada.

Eu até pensei que pudessem ser os usuários ignorantes... :D Mas observando direitinho a pequena peça de plástico pode ser quebrada com o dedo mindinho.

Agora o melhor, depois de diversas vezes tentando falar com o pessoal da HP (via telefone) para tentarmos solucionar o problema, eis que a própria HP nos indica uma solução, imaginem?? Isso mesmo, "Sr. aconselhamos a troca do aparelho por um outro. O Sr. pode nos dar a sua impressora e pagar a diferença". Há... querem saber quanto é a diferença? Nada menos que o preço de outra impressora.. :D

Resumindo, se não quiserem ter dor de cabeça NÃO COMPREM A IMPRESSORA HP DESKJET 6540.

Quem avisa amigo é.... ;)

UPDATE 26/02/2007: Tirei essa foto lá no trampo pra vcs terem uma idéia....

quarta-feira, 20 de fevereiro de 2008

Drivers para Sony Vaio VGN-SZ650N/C e TZ150N/B

Recentemente recebemos aqui no trabalho uns notebooks novos, dentre eles 4 notebooks Sony Vaio VGN-SZ650N/C e mais 4 do modelo TZ150N/B, todos show de bola!

O grande detalhe é que todos eles vieram com o Windows Vista... =/ e a empresa trabalha apenas com o Windows XP, então já viu a confusão.

Fui ao site do fabricante e Woow... tem disponível os drivers para o Windows XP, menos mau. Comecei então a instalação do XP.

Depois de instalar o XP rodei todos os drivers que tinha baixado (mais de 300MB, pense!), e para minha surpresa nem todos funcionaram. =/ Na verdade a instalação desses drivers me pareceu bem estranha pois todos "não tinham cara de instalação do windows", com o InstallShield e tal, apenas aparecia uma tela pedindo para selecionar o idioma e pronto... "Loading... Install... Finish".

Então fui dar aquela passeada na Net, mas não encontrei nada, e aí complicou tudo, imaginem que nem o da Ethernet funcionou no notebook. Então lembrei de um detalhe básico. Não sei se vocês já notaram que a maioria dos aplicativos instalados no XP utilizam a pasta TEMP localizada dentro do perfil do usuário... foi aí que BINGO! todos os drivers estavam lá.

Resumindo, quem teve esse mesmo problema com o Vaio VGN-SZ650N/C, fica a dica pra dar uma olhada em "C:\Documents and Settings\[user]\Configurações Locais\Temp", pois nesse local você poderá ver todos os drivers disponíves para a instalação.

Ainda não verifiquei o modelo TZ150N/B mas suponho que seja a mesma coisa.

É isso, qualquer dúvida é só me comunicar.

Abraço!

vlw!

Update 24/03/2008

Algumas fotinhas que tirei dias atrás...





Update 03/12/2008:

Conforme o colega Riberval, no Windows Vista os drivers ficam na pasta: "c:\user\[usuario]\appdata\local"

[]'s

sábado, 9 de fevereiro de 2008

Escrevendo um plugin de uploads de Imagem para o TinyMCE usando Rails e attachment_fu (Tradução)

Escrevendo um plugin de uploads de Imagem para o TinyMCE usando Rails e attachment_fu - Uma tradução do post original de Scott Roth um dos mantenedores do blog Rails Loft.

-----

TinyMCE é um belo editor de texto rico (Rich Text Editor - RTE, conhecidos também como editores wysiwyg) baseado em broswer. Nós estamos usando isso com sucesso em uma das nossas aplicações para prover um caminho amigável para pessoas não técnicas terem algum controle sobre o estilo de conteúdo que eles estão criando. Todavia, uma clara deficiência está incluída nos seus plugins, ele não possibilitam o upload uma imagem (ou qualquer arquivo) para ser usado com o RTE. Isto faz sentido quando pensamos sobre o assunto pois o upload de arquivos requer um componente do lado servidor - às vezes o lado cliente do TinyMCE precisa ter certeza sobre isso. Então, sendo um cidadão Web preguiçoso, eu tentei usar o google para escrever o plugin que eu precisava. Procurando, vi várias opões para backend PHP. Vi que não temos ainda um feito para o Ruby on Rails. Então, eu mesmo fiz um e vou rabiscar o processo aqui.

Verificando como trabalha um plugin básico Eu iniciei minha questão na página wiki dedicada a desenvolvedores do TinyMCE. Eu fiz o download da versão DEV do TinyMCE como instruído, ele inclui um exemplo de plugin chamado "_template". Para sua informação, nós estamos usando a versão 2.x do TinyMCE. De acordo com o Wiki, duas API foram alteradas na arquitetura, esse processo será um pouco diferente se você está na versão 3.x. Renomeie o plugin "_template" e copie para dentro da pasta "plugins" da sua instalação do TinyMCE. Você verá 2 arquivos nesse instante: "editor_plugin_src.js" e "editor_plugin.js". Por questões de desenvolvimento copie o arquivo "_src" para dentro do outro, na verdade é este arquivo que é lido. No final nós copiaremos novamente o arquivo "_src" e faremos a compressão do arquivos (http://javascriptcompressor.com/) "editor_plugin.js" no qual ele é o único que realmente é usado em runtime. Abra o arquivo "editor_plugins.js" e substitua todas as referências que contenha "template" com o nome do seu plugin.

Agora você precisa abrir sempre que você tiver seu método TinyMCE.init() e adicionar seu plugin nele. Especificamente, adicione o nome do plugin na linha de registro de nomes de "plugins" e na linha do seu botão de tema ("Theme_advanced_buttons1" no meu caso), então esse botão será mostrado. Você também precisa de uma imagem para ser clicada por seus usuários. Crie uma (ou lá no exemplo de plugin tem um template.gif tem um que você pode usar por enquanto) e coloque na pasta de imagens (themes/advanced/images/[pluginname].gif no meu caso).

Faça um refresh forçado na instância do TinyMCE e, voilá, você poderá ver um botão do plugin totalmente sem funcionalidade. Algum javascript alertará provavelmente no popup como um plugin exemplo é um alerta apropriado indicando que está pronto para uso.

Quando você clica no botão, você será levado a uma página popup onde o usuário poderá especificar o arquivo para upload. Vamos arrumá-lo. No arquivo editor_plugin.js" tem uma função chamada "getControlHTML" - altere o "mceTemplate" para qualquer que seja o nome de sua função - Eu escolhi "doUpload". Encontre o mesmo nome na função "execComand". Na função "execComand" tenha certeza que o comando "template['file']" aponta para um arquivo html real. Ok, agora faça um refresh no TinyMCE e clique no botão - você terá um exemplo de popup.


O front-end

Ok, agora toda nossa infraestrutura está estabelecida. Nós mostraremos que somos capaz de ligar qualquer coisa agora. O plugin que eu escrevi está atualmente um pouco mais complexo que o código mostrado aqui, pois eu criei algumas funcionalidades avançadas como uma opção de selecionar um arquivo de uma lista de aruqivos que foram previamente uplodeados para dentro do sistema. Por conta do tempo e espaço eu mostrarei um código simples aqui.

Nós precisamos pegar o exemplo do popup.htm e modificar para suportar upload de arquivos. Alguma coisa como isso:



1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>Image uploader</title>
4 <script language="javascript" type="text/javascript"
src="../../tiny_mce_popup.js"></script>
5 <script language="javascript" type="text/javascript"
src="../../utils/mctabs.js"></script>
6 <script language="javascript" type="text/javascript"
src="../../utils/form_utils.js"></script>
7 <script language="javascript" type="text/javascript"
src="../../utils/validate.js"></script>
8 </head>
9 <body>
10 <form action="/binaries/upload"
enctype="multipart/form-data" id="binary-edit-form"
method="post">
11 <p><label for="binary">Upload a file:</label><br/>
12 <input id="binary_uploaded_data"
name="binary[uploaded_data]" size="30"
type="file" /></p>
13
14 <p><label for="binary_title">Give it a
title</label><br/>
15 <input id="binary_title" name="binary[title]"
size="30" type="text" value="" /></p>
16
17 <p><label for="binary_contents">Add a
description</label><br/>
18 <textarea cols="40" id="binary_contents"
name="binary[contents]" rows="5"></textarea></p>
19
20 <input type="submit" value="Upload!" />
21 </form>
22 </body>
23 </html>


Tudo que nós fizemos aqui foi criar um front-end com um form que será colocado em sua aplicação rails (/binaries/upload) e com o campo ID o seu "attachment_fu" ativado, modelos e classes serão reconhecidos. Os javascript incluidos no topo são algumas mágicas do TinyMCE.

Eles não precisarão de todos para esse simples exemplo, mas eles provavelmente serão desejados quando você precisar de uma funcionalidade extra. Por exemplo, se você precisar de tabs na sua interface de plugin ou precisar de alguma validação.


O back-end

Para meu exemplo, nós assumiremos que você tem um modelo e um controller Binary que já estão mixados com o "attachment_fu". Se você não usou o attachment_fu antes, Mike Clark postou um grande tutorial sobre como usar. Aqui está o método upload no controller (isto é de quem está postando).



1 def upload
2 binary = Binary.create(params[:binary])
3 @insertString = "<img src=\"#{binary.public_filename}\" />"
4 render :layout => false
5 end


O quê? um método magro? Graças à mágica do attachment_fu, nós podemos uplodear e salvar um arquivo binário com apenas uma linha. Na segunda linha, nós criamos uma string html que será inserida dentro da página cliente DOM do TinyMCE. Nós então podemos renderizar para ver. Eu estou mantendo isto bem simples para o exemplo, mas você pode ver algumas mudanças imediatas no controller. Por exemplo, você pode querer checar algum erro para ter certeza que o binário foi uplodeado e salvo corretamente. Por exemplo, se um PDF for uplodeado, você poderá querer ver o PDF na sua aplicação como um ícone link para o PDF, no qual vai requerer uma codificação parecida com essa:



1 @insertString = "<a href=\"#{binary.public_filename}\"><img
src=\"/images/pdfIcon.gif\" /></a>"


Agora nós precisamos retornar algum javascript para o browser para inserir nossa imagem dentro do RTE. O visualzualizador de arquivo (upload.rhtml usando meu código):



1 <script language="javascript" type="text/javascript"
src="/javascripts/tiny_mce/tiny_mce_popup.js"></script>
2 <script language="javascript" type="text/javascript">
3 tinyMCEPopup.execCommand("mceInsertContent", false, '<%=
@insertString %>');
4 tinyMCEPopup.close();
5 </script>


Isso também é muito simples. Usando a função interna do TinyMCE, nós pegamos nossa string HTML construída e colocamos em DOM e então fechamos o janela popup.


Terminando

Agora nós temos todos os pedaços para tentar nosso novo plugin. Nele você pode fazer upload de imagem e ele aparecerá imediatamente na área e texto do TinyMCE da sua aplicação. Se você está pronto para colocar em produção e quer seguir as boas práticas do TinyMCE, não esqueça de copiar seu "editor_plugins.js" para dentro do arquivo "_src" e despir o arquivo de execução para ser carregado mais rapidamente. (Moxiecode sugere o jstrim.)

Como mencionado anteriormente, existem muitas maneiras interessantes e tarefas complexas que você pode realizar com um plugin como esse. A intenção aqui foi fazer uma viagem completa ao de como funciona um plugin e como ele pode ser usado para criar trabalhos futuros.
Esperançosamente essa ajuda vai iniciá-lo.


-----


A tradução acima necessita de ajustes (principalmente o 2o parágrafo), visto que essa é uma das primeiras traduções que faço para tentar aprimorar meu Inglês. Se você quer contribuir melhorando essa tradução deixe um comentário ou envie um email para jackson.pires [at] gmail.com.

Desde já eu agradeço sua contribuição.

quarta-feira, 6 de fevereiro de 2008

Criando um tema para o Mephisto utilizando Liquid (Tradução)

Criando um tema Mephisto utilizando Liquid - Uma tradução do post original de Jon Milet Baker mantenedor do blog Clockwork Objects.

-----

Mephisto é uma excelente plataforma de blog escrita em Ruby on Rails por Rick Olsen e Justim Palmer, ambos estão por trás do excelente Lighthouse Issue Traking Software. Este artigo / tutorial guiará você passo a passo através do processo de criação de um tema / template customizado.

Em sua extensão eu assumirei que você já está familiarizado com a linguagem Ruby e o com o Framework Rails de Desenvolvimento Web, mas tentarei manter as coisas simples sempre que possível.

Primeiro de tudo, um dos melhores caminhos para aprender como criar um tema / template customizado é fazendo o download de um tema existente no Mephisto Themes Gallery e olhando dentro do arquivo .zip vendo como o autor implementou os temas.

Para iniciar você vai precisar de uma cópia do Mephisto para testar os temas. Você pode facilmente fazer o checkout da última versão do subversion. Siga as instruções do Site do Mephisto. Os temas do Mephisto ficam aramazenados no diretório /themes/ do diretório base da sua aplicação Rails. Se você tiver uma instalação padrão simples, você precisará criar uma nova pasta vazia em /themes/site1/. Você pode chamar a pasta como você queira, este é o local onde criaremos nosso tema.

Temas Mephisto são feitos com aquivos de template Liquid (basicamente arquivos html com marcações de tags extras que injetam conteúdo ao seu template), imagens usadas por seu template, CSS e arquivos Javascript.


Entendendo arquivos Liquid

Os arquivos Liquid foram criados pelos desenvolvedores do Shopify, eles usaram para customizar os shoppins dos seus usuários. Estes templates trabalham exatamente como os arquivos .rhtml do Rails, no entanto eles são salvos de forma que se uma variável for nula ou indefinida ele não levanta uma exceção ou erro no servidor, ele simplesmente não gera qualquer conteúdo. Para desenvolvedores não Rails, arquivos .rhtml armazenam o html para páginas e contém tags especiais <% > onde o código Ruby pode ser inserido e tags <= %> onde podemos colocar saídas para as páginas. Arquivos Liquid são bem parecidas, entretanto ao invés de tags < > não temos { } e ao invés de <= %> nós teremos tags {{ }}.

Mais informações podes ser encontradas no site do Shopify, e eu recomendo essa leitura em adição a esse artigo.

Mephisto provê uma variedade de variáveis que podem ser usadas não apenas para colocar conteúdo na página, mas também para gerar navegação de links entre páginas. Por exemplo, no template isso é usado para mostrar um artigo tais como este, nós temos uma tag {{ }} que especifica a saída de texto do corpo do artigo como isso {{ article.body }}.


Iteração

Se um ítem é um array nós podemos fazer um loop através de cada elemento usando o seguinte:



1. {% for blog_section in site.blog_sections }
2. {{ blog_section.name }}
3. { endfor %}



Condições

Nós podemos também testar valores nestas variáveis Liquid e condicionalmente mostrar seu conteúdo:



1. {% if section.is_home }
2. Welcome to the site…
3. { endif %}



Referência de Variáveis

Antes de nós iniciarmos a criação de templates, existem dois lugares disponíveis para olharmos as variáveis Liquid disponíveis no Mephisto, diretamente no site do Mephisto e também no velho Wiki do Mephisto.

Existem vários examplos de como fazer coisas como formatação de datas etc., especialmenten no link citado anteriormente.

Estrutura do Mephisto

Em adição a exitência de um simples blog, o Mephisto provê um Sistema de Gerenciamento de Conteúdo - CMS (Content Management System), isto permite você criar o conteúdo das páginas, tais como uma página "sobre" ou portifólio.

Quando nós desenhamos um tema, nós precisamos produzir diferentes tipos de conteúdo (blog / páginas) em mente.


Arquivos Liquid Requeridos

Para fazer um tema, o Mephisto olha para o mínimo de arquivos, os quais precisam ser armazenados em uma pasa chamada "templates", no interior das pastas você pode criar ela sobre /themes/site1/. Você precisa ter cuidado de como a pasta estar exatamente ecrita, pois é onde o Mephisto irá olhar.

  • section.liquid - Esse template é usado para as seções do blog e normalmente mostram muitos artigos, este template também é geralmente usado como template da sua home page.
  • single.liquid - Esse template é usado para mostrar um simples artigo, frequentemente nós mostramos somente pequenos resumos dos artigos na seção blog mostrada acima.
  • tag.liquid - Esse template é usado para mostrar artigos para uma tag particular.
  • search.liquid - Esse template é usado para mostrar resultados de pesquisa.
  • archive.liquid - Esse template é usado para mostrar artigos de um determinado mês.
  • error.liquid - Esse template é usado para mostra um erro customizado, quando um artigo ou pesquisa não for encontrado.

layout.liquid
Em adição aos templates acima, nós temos um template chamado "layout.liquid" que abrange tudo, o qual provê conteúdo para cada página, onde podemos colocar nosso principal design (look and feel). Este arquivo está localizado não em "templates" como mostrado acima, mas em uma subpasta (novamente na parte de dentro do tema) chamada "layouts".


Criando um layout template (layout.liquid)

Como mencionado acima, este arquivo é localizado dentro da pasta do nosso tema. O arquivo usado não tem tanta importância pois neste ponto nós estamos no blog, então nós podemos usá-lo para colocar qualquer conteúdo para aparecer em todas as páginas, por exemplo, o cabeçalho com logos e em meu caso um formulário de busca, barras laterais e rodapé. Está pagina é também a única página que engloba o cabeçalho html e o corpo com tags, então isso é o mínimo que nós precisamos.



1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2. <html>
3. <head>
4. <title>My Blog</title>
5. </head>
6. <body>
7. {{ content_for_layout }}
8. </body>
9. </html>


Seção Head
Em vez de ter um título em uma página estática, nós podemos inserir dinamicamente o título do site ou se nós estivermos olhando para um artigo de um blog, o título do artigo é mostrado. Isto não só trás aos usuários uma melhor experiência, como também mostra o título em listas de buscadores e serviços de estatísticas como o Feedburner.



1. <title>{{ site.title }} {% if article } – {{ article.title }} { else } {{ site.subtitle }} { endif %}</title>


Acima nós mostramos o título do site, e se nós estivermos vendo um artigo, o objeto artigo é avaliado, então nós podemos mostrar o título ou mostrar o subtítulo do site, como setado nas Configurações Administrativas.

Nós também precisamos ter certeza que nossos browsers podem descobrir automaticamente nosso Feed RSS, então nós precisamos adicionar o seguinte na nossa seção head.



1. {{ head.feed }}
2. <!— If you are using feed burner, set it up with your RSS feed http://yourdomain/feed then use the feedburner address —>
3. <link href=“http://feeds.feedburner.com/miletbaker“ title=“Jon Milet Baker’s Blog“ type=“application/rss+xml“ rel=“alternate“/>


Nós também precisamos referenciar qualquer arquivo Javascript ou Stylesheet externo usando as seguintes tags:



1. {{ ‘stylesheetfilename’ | stylesheet }}
2. {{ ‘javascriptfilename’ | javascript }}


Seção Body
Em layout.liquid nós precisamos criar nossos links de navegação para acessar diferentes páginas ou seções do blog. Eu geralmente crio a navegação usando lista de tags não encomendadas, modelando elas usando CSS. Eu posso então gerar uma lista de items usando uma iteração Liquid como essa abaixo:



1. <ul>
2. {% for section in site.page_sections }
3. <li><a href=“{{ section.url }}“>{{ section.name }}</a></li>
4. { endfor %}
5. </ul>


Acima são criados links para nossas seções de páginas, nós podemos criar links para a seção blog alterando a linha 2 para:



1. {% for section in site.blog_sections %}


Nós também podemos adicionar de forma parecida uma caixa de procura em cada página, para isso nós adicionamos o seguinte:



1. <form method=“get“ action=“/search“>
2. <input type=“text“ class=“search“ value=““ name=“q“ id=“q“ size=“15“/>
3. </form>


Como nós gostaríamos de ter uma barra lateral definida nesse arquivo, nós precisaremos usar uma técnica que usamos para mostrar condicionalmente o título, para mostrar condicionalmente o conteúdo da barra lateral. Um exemplo para isso é mostrar artigos relacionados ao artigo corrente. Minha técnica de artigos relacionados lista outros artigos marcados com as mesmas tags. Nós podemos fazer isso assim:



1. {% if article }
2. {{ article.tags | tagged_articles | assign_to: ‘rel_articles’}}
3. { for rel_article in rel_articles limit: 5 }
4. <a href=‘{{rel_article.url}}‘>{{ rel_article.title }}
5. { endfor }
6. { endif %}


O código acima somente é mostrado quando um artigo está sendo visualizado, nós passamos todas as tags para o artigo corrente e enviamos isso para uma função do Mephisto que retorna uma coleção de artigos, que nós armazenamos em uma variável chamada rel_articles.

Em adição ao que está sendo mostrado relacionado aos artigos nós podemos também mostrar nossos links de arquivos usando o seguinte (neste caso nós precisamos somente disso para mostrar uma seção)



1. {% for month in section.months }
2. {{ section | monthly_articles: month | size | assign_to: ‘articles_count’ }}
3. { if articles_count > 0 }
4. <a href=“{{ section.path }}/{{ section.archive_path }}/{{ month | strftime: “Y/m“ }}“>{{ month | strftime: “%B %Y” }} ( {{ articles_count }} )</a>
5. { endif }
6. { endfor %}


Você poderá também fazer isso para adicionar uma lista de tags aqui. Meu site usa o Plugin de Nuvens Tag criado por Hank (Mephisto Tag Cloud plugin by Hank) para gerar diferentes tamanhos de links tag baseados no seu uso, você pode usar o Technorati Widget ou simplesmente listar todas as tags do site usando:



1. {{ site | linked_tag_list }}


Agora você já tem um template básico, ele contém nossa página de conteúdo comum, agora nós podemos dar prosseguimento aos templates individuais.


Seção template (section.liquid)

Essa seção template como mencionada anteriormente, age como o index ou contém a página para seus itens de blog de cada seção do blog, incluindo a seção home. Aqui você terá acesso não apenas ao nível de variáveis, mas também de variáveis de seção.



1. {% if articles.size > 0 }
2. <h1>Articles</h1>
3. { for article in articles }
4. <!— Within this loop we have access to the article variables. We will need to display each article and some useful properties
5. of the article variable are shown below:—>
6. {{ article | link_to_article }}
7. {{ article.published_at | date: ‘%b %d’ }}
8. {{ article.author.login }}
9. {{ article | linked_tag_list }}
10. <a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a>
11. {{ article.body | textilize }}
12. { endfor }
13. { else }
14. <p>No articles found.</p>
15. { endif %}


A linha 10 nos permite habilitar a mostrar o número de comentários com um link para parte da página onde nossos comentários estão localizados, note que usamos o pluralizador automático para trabalhar o comentário, baseado no número de comentários, isto é: "1 comentário" ou "2 comentários"

Isso também é nosso conteúdo de página e nós podemos ter artigos longos, em vez de usar o {{ article.body | textilize }} da linha 11, o Mephisto nos provê a funcionalidade de escrever um resumo. Nós podemos escrever um enunciado para as saídas dos resumos dos artigos (se não existir) ou um corpo para os artigos curtos. Isso então requer que você adicione um resumo quando estiver escrevendo um artigo longo, por exemplo, este artigo tem todo texto acima para "Entender arquivos Liquid", isso pode ficar no cabeçalho. O resto do texto fica no corpo.

Nós podemos então substituir {{article.body | textilize }} por:



1. {% if article.excerpt.size > 0 }
2. {{ article.excerpt | textilize }}
3. <a href=‘{{ article.url }}‘ >More…</a><br/><br/>
4. { else }
5. {{ article.body | textilize }}
6. { endif %}


Nota: Eu encontrei no Mephisto saídas que alimentam o article.excerpt seguindo de article.body para cada artigo. Então eu achei que o melhor caminho para fazer isso é usar um resumo para criar um divisor de artigos longos e não ter um texto no resumo repetido no artigo. Entretanto é bom saber como implementar isso, você poderá ter saídas de resumos para o artigo entre aspas no topo do seu artigo, literalmente como um resumo no corpo do texto.


Template Simples (single.liquid)

O template single.layout é usado para mostrar um ítem particular do blog. Isso também é usado por default para mostrar itens de página.

Nessa página nós temos o acesso a variáveis do objeto artigo e queremos ter o seguinte na saída de página:



1. <h1>{{ article.title }}</h1>
2. <p>Posted: {{ article.published_at | date: ‘%d %B %Y’ }}, by {{ article.author.login }}<br/>
3. Tags: {{ article | linked_tag_list }}<br/>
4. Comments: <a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a></p>
5. {{ article.excerpt | textilize }}
6. {{ article.body | textilize }}


Acima nós listamos o título do artigo, quando, e por quem ele foi publicado, juntamente com as tags. Como eu estou usando um resumo em sepadado do artigos grandes, eu simplesmente mostrei a saída do resumo imediatamente seguida do corpo do texto. Se não tiver resumo somente o texto é mostrado.

Em adição ao código acima nós precisaremos habilitar as pessoas adicionarem comentários aos nossos artigos (e eu sugiro você assinar e usar Askimet).

Nós precisamos adicionar o seguinte código para mostrar nossos comentários:



1. <a name=‘comments‘></a>
2. {% if article.comments.size != 0 }
3. { for comment in article.comments }
4. {{ comment.author_link }}
5. {{ comment.published_at | date: ‘%d %B %Y’ }}
6. {{ comment.body | textilize }}
7. { endfor }
8. { endif %}


A tag do topo é usada quando um usuário navega para a URL de comentário de um artigo, ele pega diretamente a localização da página. Você também pode incluir o Gravatar do comentarista, se ele possuir. Com isso podemos usar o seguinte código para o loop acima:



1. {{ comment | gravatar: 80, “/images/mephisto/avatar.gif” }}


O valor numérico 80 é o tamanho que será mostrado o gravatar, você pode especificar qualquer tamanho acima de 80px.

Nós também precisamos prover o usuário de um formulário para adicionar comentários, se nós estaremos aceitando comentários no artigo, nós faremos o seguinte:



1. {% commentform }
2. <!- comment form ->
3. <label for=“comment_author“>Nick Name</label><br/>{{ form.name }}<br/>
4. <label for=“comment_author_email“>Email (optional)</label><br/>{{ form.email }}<br/>
5. <label for=“comment_author_url“>Website (optional)</label><br/>{{ form.url }}<br/>
6. <label for=“comment_body“>Let the thoughts flow….</label><br/>{{ form.body }}<br/>
7. <input type=“submit“ value=“Add“ />
8. { endcommentform %}


Templade de Tag (tag.liquid), Template de Arquivo (archive.liquid) & Templante de Busca (search.liquid)

Existem três caminhos que para encontrar artigos no seu blog usando Mephisto. Usando a facilidade das tags para encontrar artigos que possuem tags particulares à pesquisa, usando a facilidade dos arquivos, que podem encontrar artigos por data facilmente, e a faciliade da pesquisa.

Todos estes serão geralmente olhados de forma parecida, listando simplesmente o título e data das páginas e talvez o corpo ou o resumo do conteúdo, como nós fizemos como o section.layout.template.

Continuando nós podemos desejar listar o número de artigos, usando por exemplo:



1. {{articles.size | pluralize: ‘article’ }} found.


Paginando
Mephisto mostrará somente o número de ítens especificados nas Configurações Administrativas. Desafortunadamente o Mephisto só implementa paginação no template de busca quando usado juntamente com a procura. Aqui nós podemos adicionar no arquivo search.liquid o seguinte código para habilitar os usuários navegarem pelas páginas.



1. {% if previous_page != “” }<a href=“{{ previous_page }}“>< href="“{{"></a>{ endif %}


Por conta do articles.size conter o número de artigos da saída de página, com buscas que retornam múltiplas páginas, nós podemos não querer mostrar o número total de artigos encontrados. Neste caso nós precisamos alterar o exemplo acima de articles.size para search_count como o seguinte:



1. {{search_count | pluralize: ‘article’ }} found.


Template de Erro (error.liquid)

O último template que nós precisamos criar é o error.liquid template, ele é mostrado sempre que o usuário requisitar um artigo ou um recurso que não exista. Isso é uma boa prática para pegar as opções de usuários para encontrar o que eles estão olhando, então primeiramente é mostrado os artigos mais recentes, mas também é disponibilizado um formulário de busca (veja layout.liquid), permitindo o usuário procurar o conteúdo requerido.


Partials

Assim como no Rails, se nós temos o conteúdo que será usado em mais de um template Liquid, nós podemos armazenar em uma "partial" e incluir nos templates quando precisarmos, por exemplo nossa tag, arquivos e buscas, toda lista de nossos artigos são listados da mesma forma. Neste caso, em vez de repetir nós mesmos cada arquivo, nós podemos incluir no cabeçalho dos arquivos de tag, arquivo e busca, e para a listagem atual colocamos o código que é repetido em um arquivo chamado _article.liquid, isto é:



1. {{ article | link_to_article }}
2. {{ article.published_at | date: ‘%b %d’ }}
3. {{ article.author.login }}
4. {{ article | linked_tag_list }}
5. <a href=“{{ article.url }}#comments“>{{ article.comments_count | pluralize: ‘comment’ }}</a>


e então na tag.liquid, archive.liquid e search.liquid incluiremos o arquivo para cada artigo em nossos objetos de artigos como o seguinte:



1. {% include ‘article’ with articles %}


Distribuindo Templates

Finalmente, se nós quisermos distribuir nossos templates, ou se você acha ter um bom template, porque não faz o upload para o Mephisto Theme Gallery. Para fazer isso nós precisamos empacotar o conteúdo de nosso diretório de tema dentro de um arquivo .zip, mas antes de fazermos isso, nos precisamos primeiramente criar um uma imagem de pré-visualização do nosso tema chamada preview.png na raiz do diretório do nosso tema e também criar um arquivo de descrição que inclui quem é você, como o tema é chamado etc. Isso é armazenado em um arquivo chamado about.yml e é definido em YAML como os seguinte:



1. title: ClockObj Theme
2. author: Jon Milet Baker
3. version: 1.0
4. homepage: http://clockobj.co.uk
5. summary: THe theme for clockobj.co.uk


Este artigo é apenas um rápida introdução à como criar você mesmo um tema Mephisto. Existem muitos outros recursos não apenas no site do Mephisto mas também no seu Wiki.


Mais Informações

Blog Mephisto
Wiki Mephisto


-----

A tradução acima necessita de ajustes, visto que essa é uma das primeiras traduções que faço para tentar aprimorar meu Inglês. Se você quer contribuir melhorando essa tradução deixe um comentário ou envie um email para jackson.pires [at] gmail.com.

Desde já eu agradeço sua contribuição.


Blogger / Blogspot com Syntax Highlighting para códigos

Esse feriadão consegui fazer uma coisa que já vinha pensando a muito tempo, traduzir um post sobre a criação de temas para Mephisto. A idéia é tentar aprimorar meu ingRêis. :D

Bom, nessa jornada me deparei com uma coisa que ainda não tinha percebido em relação ao Blogger / Blogspot, o suporte a Syntax Highlighting para códigos.

Como sempre dei uma xeretada na Net e encontrei algumas soluções, todas elas baseadas em CSS + .JS. O detalhe é que não encontrei nada em português, por isso resolvi fazer esse post.

Pra conseguir a façanha é bom dar uma passa da nesses links:

1. Morten Lyhr
2. Juri Strumpflohner
3. google-code-prettify
4 . README do google-code-prettify
4. Scroll area with overflow in CSS
5. Conversor de Markup

Depois de dar uma lida nos links acima você vai notar que a idéia é a seguinte:

1- Tudo é baseado no CSS + JavaScript, então você deve baixar o arquivo do google-code-prettify e hospedá-lo em algum lugar para que o seu blog possa acessá-lo durante o "carregamento" da página.

2 - Depois você deve adicionar as duas linhas abaixo (indicando o endereço onde está seu CSS e seu Javascript) no HTML do seu tema do Blogger (clicando em MODELO > Editar HTML)



<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>


3 - Deve-se ainda adicionar a tag (onload="prettyPrint()") no body do seu Modelo HTML, algo como: <body onload="prettyPrint()">

4 - Para adicionar os blocos de código verifique o README do google-code-prettify.

5 - Um último detalhe é que o código não coloca scroll bars automáticos então é necessário adicionar um CSS no corpo do HTML do modelo mesmo e utilizá-lo em conjunto com o google-code-prettify e se precisar utilizar o conversor de markup para tags HTML que precisem ser impressas junto ao código.

Acho que é isso.. :)

Se por acaso ficar algo que você não tenha entendido é só deixar um comentário que eu tentarei ajudá-lo.

Pronto! agora é só usar... :D

Abraço!!!

terça-feira, 5 de fevereiro de 2008

Asus eeePC em Paulo Afonso - BA !!!

Wow... :)

Esses dias participei de um evento aqui da cidade e por acaso acabei dando de cara com o Asus eeePC, que pra quem não sabe é um notebook ultra portátil da Asus.

O modelo que vi estava com 1Gb de Ram e com o Windows XP instalado e parecia estar rodando tudo bonitinho. Não chequei a "testar", mas ele estava conectado via cabo a uma monitor externo (isso chamava atenção de todos).

O que deu pra notar foram duas coisas: A primeira é que ele realmente é ultra portátil, praticamente a metade do tamanho dos notebooks convencionais (mesmo os de 12''), lembra muito um Toshiba Libretto (foto abaixo de um Libretto do colega de trabalho).


A segunda é que por conta do seu tamanho acredito que não seja indicado para que usa o notebook com uma frequência alta, pois o seu tamanho nesse caso atrapalha, as teclas são muito juntas, o que prejudica o uso "natural" do notebook.


Bem, continuo acreditando que os melhores notebooks ainda são os de 13.3'', geralmente eles unem a portabilidade/mobilidade, potência e naturalidade de uso sem incômodo extras.

Ahh... derrepente o Asus eeePC + um teclado flexível consiga resolver o problema de naturalidade de uso + mobilidade.. :D

Antes que eu esqueça, a foto acima foi a que consegui tirar com o celular... :D

abraço!